<!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. mongodb 笔记

    1.java驱动下的mongo操作 1.1 数据库连接 package com.mongodb.text; import java.net.UnknownHostException; import c ...

  2. GMT\UTC YYYY-MM-DDTHH:mm:ss.sssZ、YYYY-MM-DDTHH:mm:ss.sss+8:00意义及与北京时间转换

    UTC: Universal Time Coordinated 协调世界时,又称世界标准时间. GMT: Greenwich Mean Time 格林尼治平均时. 格林尼治标准时间的正午是指当太阳横穿 ...

  3. js的一些注意点

    18-12-24 oninput事件: 在用户输入时触发,它是在元素值发生变化时立即触发: 该事件在 <input> 或 <textarea> 元素的值发生改变时触发. 缺陷: ...

  4. 转载，matla滤波函数

    转载地址http://blog.sina.com.cn/s/blog_6163bdeb0102e1dj.html 滤波器设计是一个创建满足指定滤波要求的滤波器参数的过程.滤波器的实现包括滤波器结构的选 ...

  5. Maven项目无法找到mybatis的xml映射文件

    通常我们的xml映射文件会放在源码中,普通的java项目在编译时可以将src下的xml放到classes文件中. 但maven项目编译时是不会将xml放到classes文件中,从而导致我们的mybat ...

  6. NLog的介绍使用

    https://www.cnblogs.com/zhangchengye/p/6297685.html

  7. numpy交换列

    x = np.array([[1, 2, 3], [4, 5, 6], [7, 8, 9]]) print(x) x = x[:, [1, 0, 2]] print(x) 输出 [[1 2 3] [4 ...

  8. 异常处理之IIS配置加载出错

    问题详情:  一台部署在海外服务器,在管理IIS过程中,出现问题 There was an error when trying to connect. Do you want > to rety ...

  9. Python3学习之路~7.5 异常处理

    1.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! try: pass except Excepti ...

  10. 修改文件MD5值

    1.查看文件的MD5值 (1)下载MD5Checker http://getmd5checker.com/download.html 或者 链接: https://pan.baidu.com/s/1e ...