JavaScript如何获取css属性

简介: 原文:JavaScript如何获取css属性  在web开发中,很多时候我们需要用JavaScript对网页的样式进行修改,接下来,我们就来看一下我们该如何访问css属性,针对不同情况及案例来进行分析。
原文: JavaScript如何获取css属性

  在web开发中,很多时候我们需要用JavaScript对网页的样式进行修改,接下来,我们就来看一下我们该如何访问css属性,针对不同情况及案例来进行分析。

 

情况一:css属性位于html标签内

  在实际开发过程中,如果样式表的内容比较少的话,我们通常将css属性封装在html标签中,这时JavaScript访问css属性很直接,通过访问html标签的style属性,修改具体的样式即可完成相应的操作。

  例如:

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>styleTest</title>
 6 </head>
 7 <body>
 8 
 9 <div style="width: 200px;height: 200px; background: green;" id="mydiv"></div>
10 <input type="button" value="test" onclick="test()">
11 <script type=text/javascript>
12     function test(){
13         var mydiv=document.getElementById('mydiv');
14         mydiv.style.background="red";         // id.style.属性 执行相应的操作
15     }
16 </script>
17     
18 </body>
19 </html>

  上述案例通过点击按钮,改变对应div的背景颜色。

 

情况二:css属性在其他文件中

  当css样式表不在html文件中,我们通常会在头部引入css文件名,此时。此时如果我们使用情况一的方法访问,则会发现失败。原因就是此时相应的标签没有style这个属性了,如果我们查看对应标签的style时,会发现是undefined。所以我们需要使用新的方法来访问其属性,网上的方法有很多,在这里我给出我所使用的方法。并给出相应的解释,希望能帮助到大家。

  首先取得定义类的样式表的引用,用document.styleSheet集合实现这个目的,这个集合包含HTML页面中所以的样式表,DOM为每个样式表定义一个CSSRules的集合,这个集合中包含定义在样式表中的所用css规则 (注意:Mozilla和Safari中是cssRulesIE中是rules)。

  具体如下:

  第①步:

    访问获取css文件 ( [0] 表示获取的引入的第一个css文件)

1 var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;     // 兼容不同浏览器

  第②步:

    获取指定的css属性  ( [0] 表示css文件中的第一个标签的css样式 )

1 var style1=icssrules[0];  

  第③步:

    执行相应操作

1 style1.style.background="red";

 

详细代码如下:

  html文件:

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>styleTest</title>
 6     <link rel="stylesheet" href="style.css">
 7 </head>
 8 <body>
 9 
10 <div id="mydiv"></div>
11 <input type="button" value="test" onclick="test()">
12 <script type=text/javascript>
13     function test(){
14         var mydiv=document.getElementById('mydiv');
15         var icssrules=document.styleSheets[0].cssRules || document.styleSheets[0].rules;
16         var style1=icssrules[0];
17         style1.style.backgroundColor="red";
18     }
19 </script>
20     
21 </body>
22 </html>

  外部css文件:

1 #mydiv {
2     width: 200px;
3     height: 200px; 
4     background: green;
5 }

 

  实际效果截图如下:

  点击前:

            

   点击后:

  通过两种方式,可以修改相应的css样式表。针对不同的情况可以借鉴不同的方法。

 

目录
相关文章
|
2天前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
22 0
学习css的clip-path属性
|
13天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
15天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
18 2
|
15天前
|
JavaScript 前端开发 CDN
前端 JS 经典:package.json 属性详解
前端 JS 经典:package.json 属性详解
13 1
|
15天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
14 1
|
9天前
|
前端开发 JavaScript C++
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
CSS 【详解】样式选择器(含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器)
14 0
|
11天前
|
存储 Web App开发 JavaScript
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
浏览器【详解】Cookie(含Cookie的起源,属性,个数和大小限制,作用,优点,缺点,JS 的操作方法等)
13 0
|
13天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
14 0
|
14天前
|
前端开发
设计--字体样式---斜体,CSS字体属性用法
设计--字体样式---斜体,CSS字体属性用法
|
15天前
|
前端开发
前端 CSS 经典:mix-blend-mode 属性
前端 CSS 经典:mix-blend-mode 属性
9 0