JavaScript如何获取css属性

最新推荐文章于 2023-11-17 10:59:24 发布

weixin_34163741

最新推荐文章于 2023-11-17 10:59:24 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文: 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中是cssRules，IE中是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样式表。针对不同的情况可以借鉴不同的方法。

weixin_34163741

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript如何获取css属性

原文:JavaScript如何获取css属性　　在web开发中，很多时候我们需要用JavaScript对网页的样式进行修改，接下来，我们就来看一下我们该如何访问css属性，针对不同情况及案例来进行分析。情况一：css属性位于html标签内　　在实际开发过程中，如果样式表的内容比较少的话，我们通常将css属性封装在html标签中，这时JavaScript访问css属性很直接，通过访问h...
复制链接

扫一扫