各種情況上JS擷取元素寬高

標籤：lin   答案   return   擷取   strong   height   gets   log   htm   

各種情況下JS擷取元素寬高

　　為了敘述簡單，這裡僅拿width樣本。

　　情景一，元素style屬性設定了width/height

　　<div style="width：996px">test<div>
<script>
　 var div = document.getElementsByTagName(‘div‘)[0];
　 alert(div.style.width);
</script>預設分類

　　如上，使用el.style.width即可。

　　

 

如果沒有在style屬性中設定width，那麼使用el.style.width將擷取不到，如下

　　<div>test<div>
<script>
　 var div = document.getElementsByTagName(‘div‘)[0];
　 alert(div.style.width);
</script>

　　所有瀏覽器中彈出的是Null 字元串。即使將樣式嵌在頁面的css中也仍然擷取不到，如下

　　<style>
　 div {width: 100px}
</style>

 

<div>test<div>
<script>
　 var div = document.getElementsByTagName(‘div‘)[0];
　 alert(div.style.width);
</script>

　　這時候getComputedStyle或currentStyle將會派上用場。

　　情景二，元素通過引入樣式表設定width/height

　　有兩種方式引入樣式表，一是使用link標籤引入單獨的css檔案，二是直接在html頁面中使用style標籤。這裡使用第二種方式測試。如下

　　<style>
　 div {width: 100px}
</style>
<div>test<div>
<script>
　 function getStyle(el, name) {
　 　 if(window.getComputedStyle) {
　 　 　 return window.getComputedStyle(el, null);
　 　 }else{
　 　 　 return el.currentStyle;
　 　 }
　 }
　 var div = document.getElementsByTagName(‘div‘)[0];
　 alert(getStyle(div, ‘width‘));
</script>

　　所有瀏覽器中均彈出了100px。說明通過getComputedStyle和currentStyle可以擷取到元素被定義在樣式表中的寬高。

　　那如果元素即沒有在style屬性中設定寬高，也沒有在樣式表中設定寬高，還能用getComputedStyle或currentStyle擷取嗎？答案是getComputedStyle可以，currentStyle不可以 。如下

　　<div>test<div>
<script>
　 function getStyle(el, name) {
　 　 if(window.getComputedStyle) {
　 　 　 return window.getComputedStyle(el, null);
　 　 }else{
　 　 　 return el.currentStyle;
　 　 }
　 }
　 var div = document.getElementsByTagName(‘div‘)[0];
　 alert(getStyle(div, ‘width‘));
</script>

　　div 既沒有設定style屬性，也沒有引入樣式表。在Firefox/IE9/Safari/Chrome/Opera中可以擷取到寬高（瀏覽器預設），但IE6/7/8中卻不行，返回的是auto。

注意，這裡getStyle方法優先使用getComputedStyle，而IE9已經支援該方法。因此IE9中可以擷取到寬高。但IE6/7/8不支援，只能使用currentStyle擷取。

各種情況上JS擷取元素寬高