js 获取 html元素的样式有三种方式:style、getComputedStyle 和 currentStyle等 逃离我推掉我的手 2022-06-10 01:37 727阅读 0赞 [js][] 获取 html元素的样式有三种方式:style、getComputedStyle 和 currentStyle等。区别在于: (1)style 只能获取行间样式,但能设置样式。 (2)getComputedStyle 和 currentStyle 能够获取 行间样式/非行间样式/浏览器默认样式,但存在浏览器兼容问题,且不能设置样式。 ## 一、element.style 获取行间样式,以及设置样式 ## 1. <!DOCTYPE HTML> 2. <html lang="zh-cn"> 3. <head> 4. <meta charset="utf-8" /> 5. <title>Javascript</title> 6. <style> 7. \*\{margin: 0;padding: 0;\} 8. \#box\{width: 100px;height: 100px;margin-left: 100px;\} 9. </style> 10. </head> 11. <body> 12. <div id="box" style="background-color:\#ccc;margin-top:100px;"></div> 13. <script> 14. window.onload = function()\{ 15. var oBox = document.getElementById('box'); 16. console.log(oBox.style.width); //结果为:100px 17. console.log(oBox.style.background); //结果:rgb(204,204,204),但ie下为空 18. console.log(oBox.style.backgroundColor); //结果:rgb(204,204,204)或\#ccc 19. console.log(oBox.style.margin); //结果为空 20. console.log(oBox.style.marginTop); //结果:100px 21. oBox.style.height = '120px'; //设置样式 22. \} 23. </script> 24. </body> 25. </html> <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <style> *{margin: 0;padding: 0;} #box{width: 100px;height: 100px;margin-left: 100px;} </style> </head> <body> <div id="box" style="background-color:#ccc;margin-top:100px;"></div> <script> window.onload = function(){ var oBox = document.getElementById('box'); console.log(oBox.style.width); //结果为:100px console.log(oBox.style.background); //结果:rgb(204,204,204),但ie下为空 console.log(oBox.style.backgroundColor); //结果:rgb(204,204,204)或#ccc console.log(oBox.style.margin); //结果为空 console.log(oBox.style.marginTop); //结果:100px oBox.style.height = '120px'; //设置样式 } </script> </body> </html> **style总结:** (1)对于复合属性(如background),假设行间设置了样式:background-color:\#333,不能通过 element.style.background 来获取(见上面例子)。 (2)css属性使用驼峰法,如 backgroundColor、marginTop等。 (3)不同浏览器,一些 css 属性值可能会发生转换,如例子中的 background-color,标准浏览器会转换为 rgb 形式。 ## 二、getComputedStyle 获取css属性值 ## 1. <!DOCTYPE HTML> 2. <html lang="zh-cn"> 3. <head> 4. <meta charset="utf-8" /> 5. <title>Javascript</title> 6. <style> 7. \#box\{width: 100px;height: 100px;margin-left: 100px;\} 8. </style> 9. </head> 10. <body> 11. <div id="box" style="background-color:\#ccc;margin-top:100px;"></div> 12. <script> 13. window.onload = function()\{ 14. var oBox = document.getElementById('box'); 15. var a = getComputedStyle(oBox, null)\['width'\]; // 100px 16. var b = getComputedStyle(oBox, null).getPropertyValue('backgroundColor'); //chrome为null, ie为空 17. var c = getComputedStyle(oBox, null)\['backgroundColor'\];// rgb(204,204,204) 18. var d = getComputedStyle(oBox,null)\['padding'\];// chrome为0px, ie为空 19. console.log(a, b, c, d); 20. \} 21. </script> 22. </body> 23. </html> <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <style> #box{width: 100px;height: 100px;margin-left: 100px;} </style> </head> <body> <div id="box" style="background-color:#ccc;margin-top:100px;"></div> <script> window.onload = function(){ var oBox = document.getElementById('box'); var a = getComputedStyle(oBox, null)['width']; // 100px var b = getComputedStyle(oBox, null).getPropertyValue('backgroundColor'); //chrome为null, ie为空 var c = getComputedStyle(oBox, null)['backgroundColor'];// rgb(204,204,204) var d = getComputedStyle(oBox,null)['padding'];// chrome为0px, ie为空 console.log(a, b, c, d); } </script> </body> </html> **getComputedStyle总结:** (1)标准浏览器,ie9+以上支持 getComputedStyle。 (2)对于复合属性:使用 getPropertyValue 获取属性值时,不能使用驼峰写法,如:例子中的 getpropertyValue('backgroundColor') 无法正确获得值,而必须写成 background-color。 (3)另外,以下写法也正确:getComputedStyle(oBox, null)\['backgroundColor'\]、getComputedStyle(oBox, null)\['background-color'\], 以及 getComputedStyle(oBox, null).backgroundColor 等。 (4)当没有设置某个属性值时,chrome 会读取浏览器该属性的默认值,而 ie9+ 下结果为空。如例子中的 padding。 (5)getComputedStyle 第二个参数为”伪类“,一般用不着,设置为 null 即可。 ## 三、IE 下 currentStyle 获取css 属性值 ## 还是上面的例子: **\[javascript\]** [ view plain][view plain] [ copy][view plain] [ print][view plain][?][view plain] 1. <script> 2. window.onload = function()\{ 3. var oBox = document.getElementById('box'); 4. var a = oBox.currentStyle\['width'\]; // 100px 5. var b = oBox.currentStyle\['background-color'\]; // \#ccc 6. var c = oBox.currentStyle\['backgroundColor'\]; // \#ccc 7. var d = oBox.currentStyle.backgroundColor; // \#ccc 8. //var e = oBox.currentStyle.background-color; 错误 9. var e = oBox.currentStyle\['padding'\]; // 0px 10. console.log(a, b, c, d, e); 11. \} 12. </script> <script> window.onload = function(){ var oBox = document.getElementById('box'); var a = oBox.currentStyle['width']; // 100px var b = oBox.currentStyle['background-color']; // #ccc var c = oBox.currentStyle['backgroundColor']; // #ccc var d = oBox.currentStyle.backgroundColor; // #ccc //var e = oBox.currentStyle.background-color; 错误 var e = oBox.currentStyle['padding']; // 0px console.log(a, b, c, d, e); } </script> **currentStyle 总结:** (1)只在 IE 下支持(网上 opera 也支持,但未测)。 (2)注意 \['backgroundColor'\]、\['background-color'\] 和 .backgroundColor 等写法。 (3)未设置的属性值,currentStyle 会读取浏览器默认值,如例子中的 padding。 ## 四、不同浏览器下,获取 css 属性值 的兼容写法 ## **\[javascript\]** [ view plain][view plain] [ copy][view plain] [ print][view plain][?][view plain] 1. function getStyle(oElement, sName)\{ 2. return oElement.currentStyle ? oElement.currentStyle\[sName\] : getComputedStyle(oElement, null)\[sName\]; 3. \} [js]: http://lib.csdn.net/base/javascript [view plain]: http://blog.csdn.net/lzding/article/details/46317777#
还没有评论,来说两句吧...