JavaScript的DOM操作获取元素的大小

时间：2022-12-20 20:40:01

通过 style 内联获取元素的大小

需要注意的是style 获取只能获取到行内 style 属性的 CSS 样式中的宽和高，如果有获取；如果没有则返回空。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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" style="width:200px; height:200px; background-color: red;">测试Div</div>
</body>
</html>

 

 

通过计算获取元素的大小

通过计算获取元素的大小，无关你是否是行内、内联或者链接，它经过计算后得到的结果返回出来。
如果本身设置大小，它会返回元素的大小，如果本身没有设置，会返回默认的大小，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)只能获取到内联和链接样式的宽和高，不能获取到行内和计算后的样式。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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-color: red;
        width:200px;
        height:200px;
}
</style>
</head>
<body>
<div id="box" class="aaa">测试Div</div>
</body>
</html>

 

标签：

相关文章