<!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.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth的更多相关文章

  1. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  2. 元素间距属性（scrollLeft,scrollWidth,clientWidth,offsetWidth,padding,margin）

    scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端 ...

  3. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  4. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之全然具体解释

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth究竟指的哪到哪的距离之全然具体解释scrollHeight: 获取对象的滚动高度. scrol ...

  5. HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解

    scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最 ...

  6. H5,PC网页屏幕尺寸相关整理(scrollLeft,scrollWidth,clientWidth,offsetWidth)

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解scrollHeight: 获取对象的滚动高度. scrollLef ...

  7. HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详细的说明

      HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth具体指完全解释究竟哪里的距离scrollHeight: 获取对象的高度滚动. scrollLe ...

  8. 转 HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

    HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解 scrollHeight: 获取对象的滚动高度. scrollLe ...

  9. scrollLeft,scrollWidth,clientWidth,offsetWidth 可实现导航栏固定不动（冻结）的效果

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度.  scrollLeft:设置或获取位 ...

随机推荐

  1. 【Python基础】lpthw - Exercise 40 模块、类和对象

    一. 模块(module) 模块中包含一些函数和变量,在其他程序中使用该模块的内容时,需要先将模块import进去,再使用.操作符获取函数或变量,如 # This goes in mystuff.py ...

  2. mysql ON DUPLICATE KEY UPDATE 与 REPLACE INTO 的区别

    #mysql ON DUPLICATE KEY UPDATE 如果在INSERT语句末尾指定了ON DUPLICATE KEY UPDATE,并且插入行后会导致在一个UNIQUE索引或PRIMARY ...

  3. baiduMap & MapV 简单demo

    看到 MapV 的一个demo 的底图比较好看,练练手 MapV demos:https://mapv.baidu.com/examples/ 参考的demo:https://mapv.baidu.c ...

  4. centos7设置静态IP地址

    1.查看IP配置信息 ifconfig 如上图所示,我的em1网卡已配置好 2.编辑em1对应的配置文件,位于/etc/sysconfig/network-scripts/ifcfg-你的网卡名字 操 ...

  5. matlab2014a 转化c语言

    一.原因错误 第一种,命令窗口测试代码mbulid -setup  出错 , 就是电脑没有安装sdk7.1  网上有很多安装教程(注意要有vc++2010要卸载,具体看网上教程,安装好了要更性vc++ ...

  6. UIView的绘制原理

    当UIView调用setNeedDisplay之后, 系统会调用view对应layer的 setNeedsDisplay, 在当前runloop即将结束的时候调用CALayer的display方法. ...

  7. urlib库的使用

    urlib库实际上不是很常用,因为其api调用复杂,已被requests模块取代. 1.request发送请求 from urllib import request #默认指定的是get请求 #url ...

  8. LeetCode 5 最长对称串

    LeetCode 5 最长对称串 最早时候做这道题的时候还是用Java写的,用的是字符串匹配的思路,一直Time Limit Exceeded.甚至还想过用KMP开优化子串查找. public cla ...

  9. Complex类的实现

    #include<iostream> #include<cmath> using namespace std; class complex{ public: complex() ...

  10. Chrome Inspect调试微信出现空白页面的解决方法

    首先,需要打开手机的USB调试和微信的TBS 调试开关. 如果不打开TBS开关,Inspect时会检测不到任何微信的H5页面 使用微信扫码下方二维码,打开TBS调试开关: 普通网页: 小程序: 微信扫 ...