一、JavaScript尺寸样式操作
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.属性名=新样式
var box = document.getElementById('box'); //获取box
box.style.css.style; //CSSStyleDeclaration
box.style.css.style.color; //red
box.style.css.style.fontSize; //20px
注意:如果遇到css样式具有横杠例：font-size需要改写成fontSize，去除横杠并将首字母大写
1.通过style内联获取元素的大小
var box = document.getElementById('box'); //获取元素
box.style.width; //200px、空
box.style.height; //200px、空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 尺寸</title>
<script type="text/javascript">
window.onload=function () {
var ad = document.getElementById("ad");
var adw = ad.style.width; //只能获取内联的尺寸大小
var adh = ad.style.height; //只能获取内联的尺寸大小
alert(adw);
alert(adh)
}
</script>
</head>
<body>
<div id="ad" style="height: 200px;width: 200px">
</div>
</body>
</html>2.scrollWidth和scrollHeight
这组属性可以获取滚动内容的元素大小。
box.scrollWidth; //200
box.scrollHeight; //200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 尺寸</title>
<style type="text/css">
div{
/*由于浏览器自身原因和各个浏览器之间的差异，这里默认设置为0px*/
padding: 0px;
margin: 0px;
}
#ad{
border: 1px solid red;
padding: 10px;
margin: 20px;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload=function () {
var ad = document.getElementById("ad");
var adW = ad.scrollWidth;
var adH = ad.scrollHeight;
alert(adW); //205
alert(adH); //565
}
</script>
</head>
<body>
<div id="ad" style="height: 200px;width: 200px">
它往上想明白那阳光也往下想守护着土壤当天空不再蓝就落下一张张落地声响慢慢枯黄曾经淡绿
的忧伤山丘蜿蜒形状被贪婪切成方没人听见它在日夜祈求的愿望河流不再笑着流淌花也不再香我
们唯一学会的面对竟然是遗忘让它倒在一场雷雨之后的小巷而我要实现它的愿望它曾扶持过瓦墙
也为孩子们遮阳用呼吸让这世界不再浑浊责怪的话从不说难过也只是静默只懂对别人温柔当天空
不再蓝就落下一张张落地声响慢慢枯曾经淡绿的忧伤山丘蜿蜒形状被贪婪切成方没人听见它在日
夜祈求的愿望河流不再笑着流淌花也不再香我们唯一学会的面对竟然是遗忘让它倒在一场雷雨之
后的小巷而我要实现它的愿望
</div>
</body>
</html>
3.offsetWidth和offsetHeight
这组属性可以返回元素实际大小，包含边框、内边距和滚动条。
box.offsetWidth; //200
box.offsetHeight; //200
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 尺寸</title>
<style type="text/css">
#ad{
border: 1px solid red;
}
</style>
<script type="text/javascript">
window.onload=function () {
var ad = document.getElementById("ad");
var adw = ad.offsetWidth; //202,获取元素的实际大小，包含边框，内边距，滚动条等
var adh = ad.offsetHeight;
alert(adw);
alert(adh);
}
</script>
</head>
<body>
<div id="ad" style="height: 200px;width: 200px">
</div>
</body>
</html>4.clientLeft和clientTop
这组属性可以获取元素设置了左边框和上边框的大小。
box.clientLeft; //获取左边框的长度
box.clientTop; //获取上边框的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 尺寸</title>
<style type="text/css">
#ad{
border: 10px solid red;
}
</style>
<script type="text/javascript">
window.onload=function () {
var ad = document.getElementById("ad");
var adl = ad.clientLeft;
var adt = ad.clientTop;
alert(adl); //10
alert(adt); //10
}
</script>
</head>
<body>
<div id="ad" style="height: 200px;width: 200px">
</div>
</body>
</html>5.offsetLeft和offsetTop
这组属性可以获取当前元素相对于父元素的位置。
box.offsetLeft;
box.offsetTop;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 尺寸</title>
<style type="text/css">
#ad{
border: 10px solid red;
margin: 20px;
}
</style>
<script type="text/javascript">
window.onload=function () {
var ad = document.getElementById("ad");
var adl = ad.offsetLeft;
var adt = ad.offsetTop;
alert(adl); //28，浏览器默认的8个像素大小，设置了margin:20px
alert(adt); //20,一样的设置 不一样的大小；一般操作会将padding，margin设置为0px
}
</script>
</head>
<body>
<div id="ad" style="height: 200px;width: 200px">
</div>
</body>
</html>6.scrollTop和scrollLeft
这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。
box.scrollTop; //获取滚动内容上方的位置
box.scrollLeft; //获取滚动内容左方的位置