基本代碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style></head><body> <div style="width:100px;height:100px;background-color:red">This is div</div></body></html>1.通過使用element.style屬性來獲取
<script> var div = document.getElementsByTagName("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundColor); //red</script>element.style屬性只能獲取行內樣式，不能獲取<style>標簽中的樣式，也不能獲取外部樣式
由于element.style是元素的屬性，我們可以對屬性重新賦值來改寫元素的顯示。
<script> var div = document.getElementsByTagName("div")[0]; div.style['background-color'] = "green"; console.log(div.style.backgroundColor); //green </script>2.通過getComputedStyle和currentStyle來獲取樣式
getComputedStyle的使用環境是chrome/safari/firefox IE 9,10,11
<script> var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow</script>currentStyle在IE里能得到完美支持，chrome不支持，ff不支持
<script> var div = document.getElementsByTagName("div")[0]; var styleObj = div.currentStyle; console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow </script>3.ele.style和getComputedStyle或者currentStyle的區別
3.1 ele.style是讀寫的，而getComputedStyle和currentStyle是只讀的
3.2 ele.style只能得到行內style屬性里面設置的CSS樣式，而getComputedStyle和currentStyle還能得到其他的默認值
3.3 ele.style得到的是style屬性里的樣式，不一定是最終樣式，而其他兩個得到的是元素的最終CSS樣式
4.獲取樣式兼容性寫法
<script> //獲取非行間樣式(style標簽里的樣式或者link css文件里的樣式)，obj是元素，attr是樣式名 function getStyle(obj,attr){ //針對IE if(obj.currentStyle){ return obj.currentStyle[attr]; //由于函數傳過來的attr是字符串，所以得用[]來取值 }else{ //針對非IE return window.getComputedStyle(obj,false)[attr]; } } /* 獲取或者設置css屬性 */ function css(obj,attr,value){ if(arguments.length == 2){ return getStyle(obj,attr); }else{ obj.style[attr] = value; } } </script>5.window.getComputedStyle(ele[,pseudoElt]);
第二個參數如果是null或者省略，則獲取得到是ele的CSSStyleDeclaration對象
如果是一個偽類，則獲取到的是偽類的CSSStyleDeclaration對象
<style>div{ width:200px; height:200px; background-color:#FC9; font-size:20px; text-align:center; }div:after{ content:"This is after"; display:block; width:100px; height:100px; background-color:#F93; margin:0 auto; line-height:50px; }</style><body> <div id='myDiv'> This is div </div> <input id='btn' type="button" value='getStyle'/> <script> var btn = document.querySelector('#btn'); btn.onclick = function(){ var div = document.querySelector('#myDiv'); var styleObj = window.getComputedStyle(div,'after'); console.log(styleObj['width']); } </script></body>6.getPropertyValue獲取CSSStyleDeclaration對象中的指定屬性值
<script> var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.getPropertyValue("background-color"));</script>getPropertyValue(propertyName);中的propertyName不能是駝峰式表示
obj.currentStyle['margin-left'] 有效
obj.currentStyle['marginLeft'] 有效
window.getComputedStyle(obj,null)['margin-left'] 有效
window.getComputedStyle(obj,null)['marginLeft'] 有效
window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效
window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 無效
obj.currentStyle.width 有效
obj.currentStyle.background-color 無效
obj.currentStyle.backgroundColor 有效
window.getComputedStyle(obj,null).width 有效
window.getComputedStyle(obj,null).background-color 無效
window.getComputedStyle(obj,null).backgroundColor 有效
綜上，就是帶有"-"的屬性不能直接點出來，所以有getPropertyValue方法來處理，但是可以用[]來取代getPropertyValue
7.defaultView
在許多在線的演示代碼中, getComputedStyle 是通過 document.defaultView 對象來調用的。 大部分情況下，這是不需要的， 因為可以直接通過window對象調用。但有一種情況，你必需要使用 defaultView, 那是在firefox3.6上訪問子框架內的樣式 (iframe)
以上這篇JS之獲取樣式的簡單實現方法(推薦)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
