通過js獲取css屬性
阿新 • • 發佈：2018-11-05
1、通過dom.style.屬性 來獲取
但是這種方法無法獲取id、class裡的屬性
例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #c1 { background-color: red; color: black; } </style> </head> <body> <h1 id="c1" >ss</h1> <h2 id="c2" style="background-color: red;" >222</h2> <script> var dom = document.getElementById("c1"); var dom2 = document.getElementById("c2"); console.log(dom.style.backgroundColor);//為空 console.log(dom2.style.backgroundColor);//輸出red,如果style中的顏色用rgba形式表示，輸出的也是rgba形式 </script> </body> </html>
2、在IE中用的是dom.currentStyle,標準下用的是dom.getComputedStyle
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #c1 { background-color: #FF0000; color: white; } </style> </head> <body> <h1 id="c1" >ss</h1> <script> var dom = document.getElementById("c1"); if(window.getComputedStyle)//判斷是否存在getComputedStyle方法 { var str = document.defaultView.getComputedStyle(dom,null).color; console.log(str); } else if(dom.currentStyle)//相容低版本ie { console.log("***"); console.log("ie版本 "+dom.currentStyle.color); } </script> </body> </html>