快捷導(dǎo)航

JS之獲取樣式的簡(jiǎn)單實(shí)現(xiàn)方法(推薦)

更新時(shí)間：2016年09月13日 13:43:51 投稿：jingxian

下面小編就為大家?guī)?lái)一篇JS之獲取樣式的簡(jiǎn)單實(shí)現(xiàn)方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

基本代碼：

<!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.通過(guò)使用element.style屬性來(lái)獲取

<script>
  var div = document.getElementsByTagName("div")[0];
  console.log(div.style.color); //""
  console.log(div.style.backgroundColor); //red
</script>

element.style屬性只能獲取行內(nèi)樣式，不能獲取<style>標(biāo)簽中的樣式，也不能獲取外部樣式

由于element.style是元素的屬性，我們可以對(duì)屬性重新賦值來(lái)改寫(xiě)元素的顯示。

<script>
    var div = document.getElementsByTagName("div")[0];
    div.style['background-color'] = "green";
    console.log(div.style.backgroundColor); //green
  </script>

2.通過(guò)getComputedStyle和currentStyle來(lái)獲取樣式

getComputedStyle的使用環(huán)境是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的區(qū)別

3.1 ele.style是讀寫(xiě)的，而getComputedStyle和currentStyle是只讀的

3.2 ele.style只能得到行內(nèi)style屬性里面設(shè)置的CSS樣式，而getComputedStyle和currentStyle還能得到其他的默認(rèn)值

3.3 ele.style得到的是style屬性里的樣式，不一定是最終樣式，而其他兩個(gè)得到的是元素的最終CSS樣式

4.獲取樣式兼容性寫(xiě)法

<script>
    //獲取非行間樣式(style標(biāo)簽里的樣式或者link css文件里的樣式)，obj是元素，attr是樣式名
    function getStyle(obj,attr){
       //針對(duì)IE
       if(obj.currentStyle){
         return obj.currentStyle[attr];               //由于函數(shù)傳過(guò)來(lái)的attr是字符串，所以得用[]來(lái)取值
       }else{
         //針對(duì)非IE
         return window.getComputedStyle(obj,false)[attr];
       }
    }
    /*
       獲取或者設(shè)置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]);

第二個(gè)參數(shù)如果是null或者省略，則獲取得到是ele的CSSStyleDeclaration對(duì)象

如果是一個(gè)偽類，則獲取到的是偽類的CSSStyleDeclaration對(duì)象

<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對(duì)象中的指定屬性值

<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') 無(wú)效

obj.currentStyle.width 有效

obj.currentStyle.background-color 無(wú)效

obj.currentStyle.backgroundColor 有效

window.getComputedStyle(obj,null).width 有效

window.getComputedStyle(obj,null).background-color 無(wú)效

window.getComputedStyle(obj,null).backgroundColor 有效

綜上，就是帶有"-"的屬性不能直接點(diǎn)出來(lái)，所以有g(shù)etPropertyValue方法來(lái)處理，但是可以用[]來(lái)取代getPropertyValue

7.defaultView

在許多在線的演示代碼中, getComputedStyle 是通過(guò) document.defaultView 對(duì)象來(lái)調(diào)用的。大部分情況下，這是不需要的，因?yàn)榭梢灾苯油ㄟ^(guò)window對(duì)象調(diào)用。但有一種情況，你必需要使用 defaultView, 那是在firefox3.6上訪問(wèn)子框架內(nèi)的樣式 (iframe)

以上這篇JS之獲取樣式的簡(jiǎn)單實(shí)現(xiàn)方法(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: