scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁
题中的那么多属性让人头都大了，他们到底是什么意思？不同浏览器的实现是一样的吗？以下所有结论来自chrome版本 53.0.2785.89 (64-bit)和firefox版本52.0.2，操作系统ubuntu16.04的测试，关于IE及其它浏览器并没有考虑。
一、谈谈XXWidth
1、width
这个是style对象的一个属性，跟你在css样式里写的那个width的值是一样的，注意他是带单位的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 20px;
margin: 20px;
padding: 20px;
background: red;
}
</style>
</head>
<body>
<div id="div"></div>
<script type="text/javascript">
var link = document.getElementsByTagName("style")[0];
var sheet = link.sheet||link.styleSheet;
var rules = sheet.rules || sheet.cssRules;
console.log(rules[0].style.width);
</script>
</body>
</html>
上述例子中结果都是 100px，当然chrome和firefox在获取CSSStyleSheet对象和cssRules对象上还有区别，chorme由sheet和rules得到，firefox由styleSheet 和cssRules得到。
2、clientWidth
这个值表示的是可用区域的宽度，测试没有竖向滚动条时两个浏览器对这个属性保持一致，有滚动条时，chrome认为滚动条是15px，ff认为是10px;而且通过document.body.clientWidth 得到的值和通过document.documentElement.clientWidth得到的值不同，前者等于css的width+左右padding，后者仍然是可用区的宽。有人将这个属性交可视区宽，本人认为不对，可以理解成可用区宽。自行体会，注意padding也是可用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clientWidth</title> <style type="text/css">
body{
margin: 0;
padding: 20px;
width: 5000px;
/* height: 10000000px; */
}
</style>
</head>
<body>
<script type="text/javascript">
console.log(document.documentElement.clientWidth);
</script>
</body>
</html>
我测试结果两个都是1319（你的测试可能不一样，浏览器的宽度不一样）;
如果出现竖向滚动条（去掉height注释），chrome值为1304,firefox值为1309。
如果用body代替上述的documentElement则，结果为5040. 如果设置box-sizing:border-box则值为5000.此处可以用标准盒子模型解释。
3、offsetWidth
表示一个对象的实际宽度。
<!DOCTYPE html>
<html>
<head>
<title>offsetWidth</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
margin: 10px;
padding: 13px;
background: red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
console.log(div.offsetWidth);
</script>
</body>
</html>
得到值为126，加上box-sizing: border-box;为100
看看有滚动条的情况
<!DOCTYPE html>
<html>
<head>
<title>offsetWidth</title>
<style type="text/css">
.outer{
width: 100px;
height: 100px;
margin: 10px;
padding: 13px;
background: red;
box-sizing: border-box;
overflow: scroll;
}
.inner{
width: 1000px;
height: 1000px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner" id="inner"></div>
</div>
<script type="text/javascript">
var div = document.getElementById("inner");
console.log(div.offsetWidth);
</script>
</body>
</html>
发现仍然是表示真实宽度。
4、scrollWidth
表示的是对象真实宽度，这个和offsetWidth有什么区别呢，我得测试测试。没区别吗？我将上面的offsetWidth换成scrollWidth后发现还是1000啊！在测试，要是一样搞两个干嘛呢，一定有区别的。
<!DOCTYPE html>
<html>
<head>
<title>scrollWidth</title>
<style type="text/css">
.outer{
width: 100px;
height: 100px;
margin: 10px;
padding: 13px;
background: red;
box-sizing: border-box;
overflow: scroll;
}
.inner{
width: 1000px;
height: 1000px;
border: 13px solid red;
padding: 12px;
margin:4px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner" id="inner"></div>
</div>
<script type="text/javascript">
var div = document.getElementById("inner");
console.log(div.scrollWidth);
</script>
</body>
</html>
一不做，二不修，border，margin，padding全上。发现offsetWidth为1050,说明它算了padding和borer，而scrollWidth为1024,只算了padding没算border。
哦！我知道了，原来offsetWidth算边宽，而scrollWidth不算边宽啊。
二、谈谈XXtop
上面谈得是与大小相关的，下面谈与位置相关的。
1、top
这个是style的属性，没有定义返回“”，定义在link或者style中的拿不到。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
<style type="text/css">
</style>
</head>
<body>
<div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div>
</body>
<script type="text/javascript">
var div = document.getElementById("div");
console.log(div.style.top);
</script>
</html>
返回20px，带单位。
2、offsetTop
他更top差不多，但是是返回的数字，而且一定有值。就是这样
结果我测试了一下，发现不对啊，就是上面的那个例子，我直接改了个offsetTop，你猜怎么着，结果是28不是20,然后我给了一个body{margin:0;}, 然后就是20了，你说奇怪不奇怪。我的理解是。因为上面是position：relative;是相对自己定位的，所以它本来的上边距离外面那个宽有8px，8px是body的margin引起的。而offsetTop考虑了这个8,是从父元素的最最外边算得，不是border那里。
3、scrollTop
表示的是被卷去的高度。比如下面就是0,因为获取的时候还没卷。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>top</title>
<style type="text/css">
body{
margin: 10px;
height: 1000000000000px;
}
</style>
</head>
<body>
<div id="div" style="width: 100px;height: 100px;background: red;position: relative;top: 20px"></div>
</body>
<script type="text/javascript">
var b = document.body;
console.log(b.scrollTop);
</script>
</html>
三、关于xxheight和xxleft，offsetParent
xxheight和xxleft跟上面的差不多，对比一下就知道了。offsetParent和parentNode是有区别的，看这里：http://blog.csdn.net/u012552049/article/details/45390181，offset相对于谁偏移，相对于谁就是offsetParent，这个元素一般来说是用了定位的元素。
参考：
- http://www.cnblogs.com/kongxianghai/p/4192032.html
- http://blog.csdn.net/woxueliuyun/article/details/8638427
- http://wenku.it168.com/d_000647093.shtml
scrollWidth,offsetWidth,clientWidth,width;scrollHeight,offsetHeight,clientHeight,height;offsetTop,scrollTop,top;offsetLeft,scrollLeft,left还有谁的更多相关文章
- height clientHeight scrollHeight offsetHeight的大致区别
这主要是针对火狐浏览器来讲的: height:就是div的高度,就是style中设置的高度:在chrome中clientHeight是包含padding的,offsetHeight和clientHei ...
- 浏览器中如何获取想要的offsetwidth、、、clientwidth、、offsetheight、、、clientheight。。。
clientWidth是对象看到的宽度(不含边线,即border)scrollWidth是对象实际内容的宽度(若无padding,那就是边框之间距离,如有padding,就是左padding和右pad ...
- 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- clientHeight ,offsetHeight,style.height,scrollHeight有区别与联系
style.height 包括 元素的滚动条,不包括边框clientHeight 不包括元素的滚动条和边框,只有在没有元素的滚动条的情况下,style.height相等于clientHeightoff ...
- scrollWidth、clientWidth、offsetWidth、width的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
- offsetHeight, clientHeight与scrollHeight的区别
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论.以下结论皆是在标准模式下测试通过的,没有测试quirk模式. clientHeight 大部分浏览器对 clientHe ...
- offsetTop,offsetHeight,clientHeight,scrollHeight,scrollTop区别
这些高度相信很多同学都搞不清楚吧.这里我通过本地测试,发现了区别. 以聊天窗口为例. 元素(class='content')高度444px,其中上下padding分别是10px,margin为0.距离 ...
- scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明
一.滚动距离.高度 scrollTop scrollLeft scrollHeight scrollWidth 二.相对位置.距离 offsetTop offsetLeft offsetHeight ...
- clientHeight , scrollHeight , offsetHeight之间的区别及兼容方案
clientHeight , scrollHeight , offsetHeight相信每个人都用过,可是每次用都要查一下到底哪个是文档大小哪个是视口大小,还有头疼的兼容问题. 先来官方的了解一下这三 ...
随机推荐
- Ubuntu Hash Sum mismatch 解决方法
有时候通过校园网对Ubuntu14.04进行更新时,会出现以下问题: W: Failed to fetch http://xxxxxxx Hash Sum mismatch 解决方法:打开搜索 → ...
- 使用秘钥连接ssh
ssh服务器搭建 通过秘钥登陆连接另外一台虚拟机 创建证书 ssh-keygen -t rsa 第一行密钥保存位置直接输入回车 确定默认创建位置为 /root/.ssh 公钥必须改名为 autho ...
- 360浏览器和猎豹浏览器重定向后丢失get参数
1.场景: step1: 用户请求项目 http://localhost:8080/myProject step2: 我们的服务器将请求重定向到一个静态页面,并拼接上部分参数,如: <%@ pa ...
- nodeJS中读写文件方法的区别
导言:nodejs中所有与文件相关的操作都在fs模块中,而读写操作又是我们会经常用到的操作,nodejs的fs模块针对读操作为我们提供了readFile,read, createReadStream三 ...
- Java Web(十三) 使用javamail进行发送邮件，(使用QQ，163，新浪邮箱服务器)
加油加油. --WH 一.发送邮件的原理 在了解其原理之前,先要知道两个协议,SMTP和POP3 SMTP:Simple Mail Transfer Protocol,即简单邮件传输协议,发送邮件的协 ...
- smarty模板基础3 *缓存数据*
缓存数据,这个并不是暂存的缓存,而是写入了内存的缓存 通过一个例子来书写:缓存数据 一.书写php和html页面的基本功能 既然是用smarty模板,那么前端和后端要分开写了 (1)php页面 < ...
- Spring框架(3)---IOC装配Bean(注解方式)
IOC装配Bean(注解方式) 上面一遍文章讲了通过xml来装配Bean,那么这篇来讲注解方式来讲装配Bean对象 注解方式需要在原先的基础上重新配置环境: (1)Component标签举例 1:导入 ...
- 《Django By Example》第八章 中文 翻译 （个人学习，渣翻）
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:还有4章!还有4章全书就翻译完成了 ...
- Vue 2.0初学后个人总结及分享
摘要:最近在上海找工作,发现Vue前景还不错,于是就打算先学习一下(之前了解过,但是一直没提到日程上)这篇随笔当是为了自己学习之后,做一个小的阶段性总结.希望本文的内容对于刚开始接触vue的朋友们有点 ...
- Select的逻辑处理顺序(Transact-SQL)
1. Select 语句基本写法 2. Select的逻辑处理顺序 SQL与其他编程语言不同的明显特征就是代码的处理顺序.在其他编程语言中,常见是按编写代码的先后顺序(从上之下)来处理.但在SQL中, ...