脚本化CSS(通过JS来间接操作CSS)

时间:2021-07-17 08:45:06

(一)通过.style.形式,获取的是行间样式,可读可写


1.行间样式语法

1     <div style="width:100px;border:5px solid red;height:100px;background-color:green">
2         
3     </div>

行间样式语法规则如下:

样式属性写在style的引号里面;样式名与样式值中间冒号隔开;样式与样式之间用分号隔开;


 2.通过JS操作CSS

 1 <body>
 2     <div style="width:100px;border:5px solid red;height:100px;background-color:green">
 3         
 4     </div>
 5 <script type="text/javascript">
 6     var div = document.getElementsByTagName('div')[0];  7 
 8     div.style.width = "300px"
 9     div.style.backgroundColor = "blue"
10 </script>

注意点:

(1).   左边是属性名,中间是赋值符号,右边是字符串形式

(2).   左边的属性名,由于JS变量不支持特殊符号(如中横线),所以有中横线连写的变量要改成小驼峰形式;即background-color 改为 backgroundColor;


  3. 通过JS操作CSS都是行间样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7  div{  8  width:100px;  9  } 10     </style>
11 </head>
12 <body>
13     <div style="height:100px;border:5px solid red;background-color:green">
14         
15     </div>
16 <script type="text/javascript">
17     var div = document.getElementsByTagName('div')[0]; 18 
19     div.style.width = "300px"
20     div.style.backgroundColor = "blue"
21 </script>
22 </body>
23 </html>

脚本化CSS(通过JS来间接操作CSS)

 

 


 ***************************************************************************************************************************************************************************************

 


 

 (二)查询样式属性值

 获取当前元素经过计算所展示的样式一切值;(只能读,不能写)

(1)window.getComputedStyle(ele,null);

改方法特性如下:     

 脚本化CSS(通过JS来间接操作CSS)

(2)   ele.currentStyle

脚本化CSS(通过JS来间接操作CSS)

 

由于IE问题,有兼容性问题;下面我们自己来写封装兼容性函数getStyle(ele,prop)

1     function getStyle(ele,prop) {
2         if(window.getComputedStyle){
3             return window.getComputedStyle(ele,null)[prop];
4         }else{
5             return ele.currentStyle[prop];
6         }
7     }

 

 脚本化CSS(通过JS来间接操作CSS)