其他分享
首页 > 其他分享> > style.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth

style.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth

作者:互联网

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 400px;
height: 400px;
background:yellow;
padding:50px;
margin: 10px;
border: 10px solid pink;
position: absolute;
left: 100px

}
#div2{
width: 200px;
height: 200px;
background:yellow;
padding:50px;
margin: 10px;
border: 10px solid pink;
position: absolute;
left: 100px
}
#div3{
width: 150px;
height: 150px;
background:yellow;
padding:50px;
margin: 20px;
border: 20px solid pink;
position: absolute;
left: 100px
}

</style>
<script type="text/javascript">
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
// alert(aDiv[2].clientLeft)
// alert(aDiv[1].clientLeft)
// offsetWidth=aDiv[0].style.width + border + padding的总长度 borer及其之内的长度
// offsetLeft=aDiv[1]的左边框(不包含边框)到 aDiv[0]()的左内边框的距离,也就是 aDiv[0]的margin + position的left值
// aDiv[2].clientLeft就是aDiv[2]的左边框border的宽度
// clientwidth:用于描述元素内尺寸宽度,是指 元素内容+内边距 大小,不包括边框、外边距、滚动条部分 clientwidth:本身宽度(200)+内边距(10*2)=220; 就是指 width+padding;
//
// scrollwidth:内容区域尺寸加上内边距加上溢出尺寸

}
</script>
</head>
<body>
https://www.cnblogs.com/panjun-Donet/articles/1294033.html
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4">
<div id="div5"></div>
</div>
</div>
</div>
</div>
<div id="divParent" style="padding: 8px; background-color: #aaa; height:200px; width:300px; overflow:auto;position:absolute;left:800px" >
<div id="divChild" style="background-color: #0f0;height: 400px; width: 500px; border: solid 10px #f00;">
</div>
</div>
scrollwidth=子div的宽度(500)+子div的边框(10*2)+父容器的padding(8)=528

scrollheight=子div的高度(400)+子div的边框(10*2)+父容器的padding(8)=428

现在我们验证一下

我们发现在 ie8及之后的 浏览器 为428,firework 也为428;而 chrome Safari opera 都为436;

因此我们可以猜测 chrome和 Safari、opera 在计算 scrollheight时,加上了 父容器的下 padding(8) 即 428+8=436;
scrollTop是指某个可滚动区块向下滚动的距离,比如向下滚动了10个像素,那么这个元素的scrollTop属性值就是10
如果一个元素不能被滚动,它的scrollTop将被设置为0。

设置scrollTop的值小于0,scrollTop 被设为0。

如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值
<script type="text/javascript">
var divParent= document.getElementById("divParent");
var scrollwidth = divParent.scrollWidth;
var scrollheight = divParent.scrollHeight;
var scrolltop = divParent.scrollTop;
var scrollleft = divParent.scrollLeft;
divChild.innerHTML += ‘clientWidth: ‘ + scrollwidth + ‘<br />‘;
divChild.innerHTML += ‘clientHeight: ‘ + scrollheight + ‘<br />‘;
</script>
</body>
</html>

标签:style,aDiv,clientLeft,scrollWidth,边框,padding,divParent,var,scrollTop
来源: https://www.cnblogs.com/yangwenlong/p/10498073.html