找到特定元素的樣式getComputedStyle

document.getElementById("elementId").style會抓到寫在特定元素HTML裡面的style，但是抓不到寫在stylesheet裡面賦予element的樣式，所以這時候就要用getComputedStyle來抓最終顯示出來的樣式。

整個函式長這樣：window.getComputedStyle(元素,null).getPropertyValue(樣式);
例如：
var CSSvalue = window.getComputedStyle(elem,null).getPropertyValue("height");

使用範例

我是div1

我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2

輸入要抓寬度的div名稱
輸入後請按我

這個小應用長這樣

<div class="div1"style="background:#ddd;display:inline-block;">我是div1</div>
<div class="div2"style="background:#aaa">我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2我是div2</div>
<div>輸入要抓寬度的div名稱<input id="selecter" type="text"><br><span onclick="run()">輸入後請按我</span></div>
<div id="demo"style="font-weight:bold;font-size:150%;"></div>
<script>
  function run(){
     var classname=document.getElementById('selecter').value;
     var element = document.getElementsByClassName(classname)[0];
     var CSSvalue = window.getComputedStyle(element,null).getPropertyValue("width");
     document.getElementById('demo').innerHTML=classname+'的寬度是'+CSSvalue;
   }

</script>