操作内联样式 

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>使用DOM操作CSS</title>
  6 </head>
  7 <script type="text/javascript">
  8 window.onload=function(){
  9 //获取box1
 10     var box1=document.getElementById("box1");
 11     //为按钮绑定单击响应函数
 12     var button1=document.getElementById("button1");
 13     button1.onclick=function(){
 14     /*修改box1的宽度
 15     通过JS修改元素的样式
 16     语法 元素.style.样式名=样式值
 17 
 18     注意 如果CSS的样式名中含有-
 19     这种名称在JS中是不合法比如background-color
 20     需要将这种样式名修改为驼峰命名法，去掉-，然后将-后面的字母大写
 21 
 22     我们通过style属性设置的样式都是内联样式，
 23     而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
 24 
 25     但是如果在样式中写了!important，则此时样式会有最高的优先级，
 26     即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失败
 27     所以尽量不要为样式添加!important
 28 
 29     通过style属性设置和读取的都是内联样式 无法读取样式表中的样式
 30     */
 31     box1.style.width="300px";
 32     box1.style.backgroundColor="yellow";
 33     };
 34 
 35 
 36     var box2=document.getElementById("box2");
 37     var button2=document.getElementById("button2");
 38     button2.onclick=function(){
 39     /*
 40     读取box1的样式
 41     语法 元素.style.样式名
 42 
 43     alert(box1.style.width);只能获取到内联样式
 44     获取元素的当前显示样式
 45     语法 元素.currentStyle.样式名
 46     它可以用来读取当前元素正在显示的样式
 47     */
 48     //alert(box2.currentStyle.width);
 49     alert(box2.style.width);
 50     };
 51 
 52 
 53 
 54     var box3=document.getElementById("box3");
 55     var button3=document.getElementById("button3");
 56     button3.onclick=function(){
 57     //alert(box3.currentStyle.backgroundColor);
 58     /*
 59     1.currentStyle只有IE浏览器支持，其他的浏览器都不支持
 60     在其他浏览器中可以使用
 61     2.getComputedStyle()这个方法来获取元素当前的样式
 62     这个方法是window的方法，可以直接使用
 63     需要两个参数
 64     第一个 要获取样式的元素
 65     第二个 可以传递一个伪元素，一般都传null
 66     该方法会返回一个对象，对象中封装了当前元素对应的样式
 67     如果获取的样式没有设置，则会获取到真实的值，而不是默认值
 68     比如 没有设置width，它不会获取auto，而是一个长度
 69     但是该方法不支持IE8及以下的浏览器
 70 
 71     通过currentStyle和getComputedStyle()读取到的样式都是只读的不能修改
 72     如果要修改必须通过style属性
 73     */
 74     var obj=getComputedStyle(box3,null);
 75     alert(obj.width);
 76     alert(obj.backgroundColor);
 77      /*alert(obj);  [object CSS2Properties]
 78      alert(getComputedStyle);
 79        function getComputedStyle() {
 80      [native code]
 81       }*/
 82     alert(getStyle(box3,"width"));
 83 
 84     };
 85 
 86 };
 87 /*
 88 3.定义一个函数，用来获取指定元素的当前的样式
 89 参数
 90 obj 要获取样式的元素
 91 name 要获取样式名
 92 */
 93 
 94 function getStyle(obj,name)
 95 {
 96   //正常浏览器的方式
 97   return getComputedStyle(obj,null)[name];
 98 //IE8及以下的方式
 99   //return obj.currentStyle.[name];
100 /*
101   if(window.getComputedStyle)
102   没有加window时，是一个变量，需要去作用域中寻找，
103   加了window变成了window对象的属性，
104   变量与属性的区别：
105   变量没有找到，会报错，属性没有找到返回undefined
106   如果是IE8及以下的浏览器，没有getComputedStyle就会报错
107 
108   return getComputedStyle(obj,null)[name];
109   else
110   return obj.currentStyle[name];
111 */
112 /*
113 不推荐使用
114 因为如果是IE9及以上的浏览器既有obj.currentStyle
115 也有getComputedStyle(obj,null)[name]，
116 按照下面写法，优先使用obj.currentStyle
117 但是还是希望优先使用getComputedStyle(obj,null)[name];
118   if(obj.currentStyle){
119   return obj.currentStyle[name];
120   }
121   else
122   return getComputedStyle(obj,null)[name];
123   */
124 
125 return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
126 }
127 
128   </script>
129 <style type="text/css">
130     #box1{
131     width:200px;
132     height:200px;
133     background-color:red;
134     }
135     #box2{
136     width:100px;
137     height:100px;
138     background-color:green;
139     }
140     #box3{
141     width:100px;
142     height:100px;
143     background-color:yellow;
144     }
145 </style>
146 <body>
147 <button id="button1">点我一下</button>
148 <button id="button2">button2</button>
149 <button id="button3">button3</button>
150 <br/><br/>
151 <div id="box1"></div>
152 <div id="box2"></div>
153 <div id="box3"></div>
154 </body>
155 </html>

 

 

posted @ 2019-07-27 16:32  zuiaimiusi  阅读(286)  评论(0)    收藏  举报