獲取元素CSS大小
通過style內聯獲取元素的大小
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="width:100px;"></div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');
console.log(box.style.width);//200px
console.log(box.style.height);//??
</script>
</html>
通過計算獲取元素的大小
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
height:200px;
}
</style>
</head>
<body>
<div id="box" style="width:100px;"></div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
var style = window.getComputedStyle ?
window.getComputedStyle(box, null) : null || box.currentStyle;
console.log(style.width);//100px
console.log(style.height);//200px
</script>
</html>
通過css規則獲取元素大小
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
height:200px;
}
</style>
</head>
<body>
<div id="box" style="width:100px;"></div>
</body>
<script type="text/javascript">
var sheet = document.styleSheets[0];//獲取link或style
var rule = (sheet.cssRules || sheet.rules)[0];//獲取第一條規則
console.log(rule.style.width);//空
console.log(rule.style.height);//200px
</script>
</html>
總結:以上的三種CSS獲取元素大小的方法,只能獲取元素的CSS大小,卻無法獲取元素本身實際的大小。比如加上了內邊距、滾動條、邊框之類的。
獲取元素實際大小
clientWidth和clientHeight
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="width:100px;padding:10px;border:5px"></div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
console.log(box.clientWidth);//120
console.log(box.clientHeight);//20
</script>
</html>
scrollWidth和scrollHeight
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="border:5px solid red;box-sizing:border-box;width:100px;overflow-y: auto">
test test test test test test test test test
</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
console.log(box.clientWidth);//90
console.log(box.clientHeight);//90
</script>
</html>
如果沒有設置任何CSS的寬和高度,它會得到計算後的寬度和高度。offsetWidth和offsetHeight
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="width:100px;padding:10px;border:5px solid red;">aa</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
console.log(box.offsetWidth);//130
console.log(box.offsetHeight);//48
</script>
</html>
獲取元素周邊大小
clientLeft和clientTop
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="margin:0">
<div id="box" style="width:100px;padding:10px;border:5px solid red;border-top-width:10px">aa</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
console.log(box.clientLeft);//5
console.log(box.clientTop);//10
</script>
</html>
offsetLeft和offsetTop
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="margin:0;padding: 8px 16px;position: relative;">
<div id="box" style="width:100px;padding:10px;border:5px solid red;border-top-width:10px">aa</div>
<div id="box1" style="position: absolute;left:40px;top: 30px"></div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
console.log(box.offsetLeft);//16
console.log(box.offsetTop);//8
var box1 = document.getElementById("box1");
console.log(box1.offsetLeft);//40
console.log(box1.offsetTop);//30
</script>
</html>
獲取元素當前相對於父元素的位置,最好將它設置爲定位position:absolute;否則不同的瀏覽器會有不同的解釋scrollTop和scrollLeft
元素位置
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body style="margin:0;padding: 8px 16px;position: relative;">
<div id="box" style="width:100px;padding:10px;border:5px solid red;border-top-width:10px">aa</div>
<div id="box1" style="position: absolute;left:40px;top: 30px;width:50px"></div>
</body>
<script type="text/javascript">
var box = document.getElementById('box');//獲取元素
console.log(box.getBoundingClientRect().top);//8,元素上邊距離頁面上邊的距離
console.log(box.getBoundingClientRect().right);//146,元素右邊距離頁面左邊的距離
console.log(box.getBoundingClientRect().bottom);//61,元素下邊距離頁面上邊的距離
console.log(box.getBoundingClientRect().left);//16,元素左邊距離頁面左邊的距離
var box1 = document.getElementById('box1');
console.log(box1.getBoundingClientRect().top);//30
console.log(box1.getBoundingClientRect().right);//90
console.log(box1.getBoundingClientRect().bottom);//30
console.log(box1.getBoundingClientRect().left);//40
</script>
</html>
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默認座標從(2,2)開始計算,導致最終距離比其他瀏覽器多出兩個像素