標籤：
一、通過 style 內聯擷取元素的大小
style 擷取只能擷取到行內 style 屬性的 CSS 樣式中的寬和高，如果有擷取；如果沒有則返回空。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById(‘box‘); //擷取元素 alert(box.style.width); //200px、 沒有設定的話為空白 alert(box.style.height); //200px、沒有設定的話為空白 }</script></head><body> <div id="box" class="aaa" style="width:200px; height:200px;">測試Div</div></body>
二、通過計算擷取元素的大小
通過計算擷取元素的大小，無關你是否是行內、內聯或者連結，它經過計算後得到的結果返回出來。
如果本身設定大小，它會返回元素的大小，如果本身沒有設定，會返回預設的大小，IE6,7,8 瀏覽器返回 auto。
<script type="text/javascript"> window.onload = function(){ var style = window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle; alert(style.width); alert(style.height); }</script></head><body> <div id="box" class="aaa">測試Div</div></body>
三、通過 CSSStyleSheet 對象中的 cssRules(或 rules)屬性擷取元素大小
cssRules(或 rules)只能擷取到內聯和連結樣式的寬和高，不能擷取到行內和計算後的樣式。
<script type="text/javascript"> window.onload = function(){ var sheet = document.styleSheets[0]; //擷取 link 或 style var rule = (sheet.cssRules || sheet.rules)[0]; //擷取第一條規則 alert(rule.style.width); //200px、空 alert(rule.style.height); //200px、空 } </script><style type="text/css"> .aaa{ background:#ccc; width:200px; height:200px; }</style></head><body> <div id="box" class="aaa">測試Div</div></body>
JavaScript的DOM_擷取CSS樣式設定元素大小
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
