javascript獲取元素樣式

時間 2019-11-15

原文原文鏈接

獲取行間樣式style

<!DOCTYPE html>
<html>
<head>
  <title>獲取行間樣式</title>
  <script>
    window.onload=function(){
      oDiv=document.getElementById("div1");
      alert(oDiv.style.width);
    }
  </script>
</head>
<body>
  <div id="div1" style="width:100px; height:100px; background:#f00;"></div>
</body>
</html>

獲取元素的當前樣式currentStyle(ie)和getComputedStyle(非ie) 兼容方法

<!DOCTYPE html>
<html>
<head>
  <title>獲取樣式兼容寫法</title>
  <script>
    function getStyle(obj,name){
      if(obj.currentStyle){
        return obj.currentStyle[name];
      }else{
        return getComputedStyle(obj)[name];
      }
    }
    window.onload=function(){
      oDiv=document.getElementById("div1");
      // alert(getStyle(oDiv,"width"));
      alert(getStyle(oDiv,"background"));
      // alert(getStyle(oDiv,"backgroundColor"))
    }
  </script>
</head>
<body>
  <div id="div1" style="width:100px; height:100px; background:#f00;"></div>
</body>
</html>

運行結果：

從上面代碼的運行結果咱們能夠看出來background返回的並非#f00而是一個複合樣式，因此碰見像background等複合樣式的時候要特殊處理，在這裏能夠用backgroundColor。html