一、DOM中各种宽度、高度
二、DOM中的坐标系
JS获取div元素的宽度
offsetWidth=width+padding-left+padding-right+border-left+border-right,
即offsetWidth描述的是元素的宽度,是指元素的宽度+内边距(左右两个)+边框(左右两个),不包括外边距和滚动条部分
offsetHeight=height+padding-top+padding-bottom+border-top+border-bottom,
即offsetHeight描述的是元素的高度,是指元素的高度+内边距(上下两个)+边框(上下两个),不包括外边距和滚动条部分
offsetTop=margin-top+padding-top(parent的)
即offsetTop描述的是元素和父容器的上边距离,是指元素的外边距(上边一个)+已定位的父容器(offsetParent)的内边距(上边一个)(不包括元素的边框和父容器的边框)
offsetLeft=margin-left+padding-left(parent的)
即offsetLeft描述的是元素和父容器的左边距离,是指元素的外边距(左边一个)+已定位的父容器(offsetParent)的内边距(左边一个)(不包括元素的边框和父容器的边框)
clientWidth=width+padding-left+padding-right
即clientWidth描述的是元素的宽度,是指元素的宽度+内边距(左右两个),不包括外边距、滚动条部分、边框
clientHeight=height+padding-top+padding-bottom
即clientHeight描述的是元素的高度,是指元素的高度+内边距(上下两个),不包括外边距、滚动条部分、边框
clientTop=border-top
即clientTop是指当前元素的上边框
clientLeft=border-left
即clientLeft是指当前元素的左边框
scrollWidth=width+padding-left+padding-right
即元素的滚动条宽度,是指宽度+内边距(左右两个),值等价于“clientWidth”的值
scrollHeight=height+padding-top+padding-bottom
即元素的滚动条高度,是指高度+内边距(上下两个),值等价于“clientHeight”的值
scrollTop元素的滚动条的垂直位置
scrollLeft元素的滚动条的水平位置
注:
http://www.llsffx.com
情况1:
元素内无内容或者内容不超过可视区,滚动不出现或不可用的情况下。
scrollWidth=clientWidth,两者皆为内容可视区的宽度。
offsetWidth为元素的实际宽度。
情况2:
元素的内容超过可视区,滚动条出现和可用的情况下。
scrollWidth>clientWidth。
scrollWidth为实际内容的宽度。
clientWidth是内容可视区的宽度。
offsetWidth是元素的实际宽度。
滚动条属性:
overflow:auto为自动,yes为有,no为无
overflow-x:横向滚动条
overflow-y:纵向滚动条
如果该div被包含在其他对象例如td中,则位置可设为相对:position:relative
特别是元素内容超过可视区,这里的滚动条宽度有点不太清楚
示例:
1 <div id="divParent" style="position:relative; background:#36F; padding:5px; border:2px solid #FF0; width:300px; overflow:auto;"> 2 <div id="divChild" style="width:400px; height:100px; border:1px solid #fff; background:#69F; margin:20px; padding:10px; 3 "></div> 4 </div> 5 6 <script type="text/javascript"> 7 var div = document.getElementById("divChild"); 8 var childWidth = div.offsetWidth; 9 var childHeight = div.offsetHeight;10 var childTop = div.offsetTop;11 var childLeft = div.offsetLeft;12 13 div.innerHTML += "childWidth:" + childWidth + "<br />";14 div.innerHTML += "childHeight:" + childHeight + "<br />";15 div.innerHTML += "childTop:" + childTop + "<br />";16 div.innerHTML += "childLeft:" + childLeft + "<br />";17 18 19 var childParent = div.offsetParent;20 div.innerHTML += "childParent:" + childParent.id + "<br />";21 22 23 var clientWidth = div.clientWidth;24 var clientHeight = div.clientHeight;25 var clientTop = div.clientTop;26 var clientLeft = div.clientLeft;27 28 div.innerHTML += "clientwidth:" + clientWidth + "<br />";29 div.innerHTML += "clientHeight:" + clientHeight + "<br />";30 div.innerHTML += "clientTop:" + clientTop + "<br />";31 div.innerHTML += "clientLeft:" + clientLeft + "<br />";32 33 34 //div.innerHTML = "";35 var divParent = document.getElementById("divParent");36 var scrollWidth = divParent.scrollWidth;37 var scrollHeight = divParent.scrollHeight;38 var scrollTop = divParent.scrollTop;39 var scrollLeft = divParent.scrollLeft;40 div.innerHTML+= "scrollWidth:" + scrollWidth + "<br />";41 div.innerHTML+= "scrollHeigth:" + scrollHeight + "<br />";42 div.innerHTML+= "scrollTop:" + scrollTop + "<br />";43 div.innerHTML+= "scrollLeft:" + scrollLeft + "<br />";44 </script>
联系客服