JavaScript问题——在浏览器中的offsetLeft/offsetWidth等属性是什么?
原文链接http://www.cnblogs.com/xiaohuochai/p/5828369.html
https://blog.csdn.net/u012532033/article/details/72852134
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
1. 偏移量共包括offsetTop、offsetLeft、offsetWidth、offsetHeight
元素:内容大小(width、height)、内边距(padding)、边框(border)、外边距(margin)、滚动条(scroll)
【1】offsetWidth:元素在水平方向上占据的大小,无单位
offsetWidth = border + 元素内容宽度 + padding
= border-left-width + padding-left- width + width + padding-right-width + border-right-width
【2】offsetHeight:元素在垂直方向上占据的大小,无单位
offsetHeight = border + 元素内容高度 + padding
= border-left-height+ padding-left- height+ height+ padding-height-width + border-right-height
注:1. 如果存在垂直滚动条,offsetWidth也包括垂直滚动条的宽度;
2. 如果存在水平滚动条,offsetHeight也包括水平滚动条的高度
<div id="test" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid black;"></div>
<script>
//122=1+10+100+10+1
console.log(test.offsetWidth);
console.log(test.offsetHeight);
</script>
有滚动条的情况
<div id="test" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid black; overflow: scroll;"></div>
<script>
//IE8-浏览器将垂直滚动条的宽度计算在width宽度和height高度中,width和height的值仍然是100px;
//而其他浏览器则把垂直滚动条的宽度从width宽度中移出,把水平滚动条的高度从height高度中移出,则滚动条宽度为17px,width宽度和height高度为剩下的83px if(window.getComputedStyle){
console.log(getComputedStyle(test).width,getComputedStyle(test).height)//83px
}else{
console.log(test.currentStyle.width,test.currentStyle.height);//100px
}
//122=1+10+100+10+1
console.log(test.offsetWidth,test.offsetHeight);
</script>
【3】offsetTop: 表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
【4】offsetLeft:表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
<div id="out" style="padding: 5px;position: relative;background-color: pink;margin: 6px;border:1px solid black">
<div id="test" style="width:100px; height:100px; margin:10px;background-color:green;"></div>
</div>
<script>
//15=test.marginTop(10) + out.paddingTop(5)
alert(test.offsetTop);
//15=test.marginLeft(10) + out.paddingLeft(5)
alert(test.offsetLeft);
</script>
注:
【1】所有偏移量属性都是只读的
<div id="test" style="width:100px; height:100px; margin:10px;"></div>
<script>
console.log(test.offsetWidth);//100
//IE8-浏览器会报错,其他浏览器则静默失败
test.offsetWidth = 10;
console.log(test.offsetWidth);//100
</script>
【2】如果给元素设置了display:none,则它的偏移量属性都为0
<div id="test" style="width:100px; height:100px; margin:10px;display:none"></div>
<script>
console.log(test.offsetWidth);//0
console.log(test.offsetTop);//0
</script>
【3】每次访问偏移量属性都需要重新计算
<div id="test" style="width:100px; height:100px; margin:10px;"></div>
<script>
console.time("time");
var a = test.offsetWidth;
for(var i = 0; i < 100000; i++){
var b = a;
}
console.timeEnd('time');//1.428ms
</script>
最新文章
- ubuntu14 谷歌输入法
- phpcms 05
- IE6/7/8如何兼容CSS3属性
- Esper系列(四)Output
- Domain Shutdown Error(JBAS010850)
- Python partial函数
- float 覆盖元素的问题
- C++模板杂谈
- JPA + SpringData 操作数据库原来可以这么简单 ---- 深入了解 JPA - 3
- .10-Vue源码之Watcher(1)
- 小程序之 fixed定位下scroll-view左右滚动失效
- 《DevOps软件架构师行动指南》读后感
- 转 让Python在Android系统上飞一会儿
- NOIp2014提高组初赛错题简析
- 在线检测域名或者ip的端口是否开放(http://coolaf.com/tool/port)
- YARN 的深入简出
- 百度地图API的网页使用
- NPOI 导出excel 通用方法
- WebFrom基础
- PID控制算法的C语言实现十一&#160; 模糊算法简介
热门文章
- 利用toggle实现背包
- wpf binging (六)多绑定
- JavaScript&#183;cookie
- element 多个文件上传多次http请求解决方法
- 基于CBOW网络手动实现面向中文语料的word2vec
- jQuery-3.事件篇---事件对象的使用
- 并发编程心得--synchronized
- Codeforces1056E.Check Transcription(枚举+Hash)
- mybatis 学习笔记 -详解mybatis 及实例demo
- Hibernate5.3 + mysql8.0遇到的问题