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>
