js获取元素宽高、位置相关知识汇总
常见clientWidth、clientHeight、offsetWidth、offsetLeft,clientX、scrollTop等词语,比较混乱,现在总结下他们的区别。
1. clientWidth:元素的宽度(width+padding),offsetWidth相比clientWidth,多个border的值 ( width+padding+border)。clientHeight 、 offsetHeight略
//某个元素的宽度和高度
var div1 = document.getElementById('div1');
console.log('元素的宽width+padding', div1.clientWidth ); //body的宽度
console.log('body的宽',document.body.clientWidth); //可视区的宽度,也就是html的宽度
console.log('可视区的宽', document.documentElement.clientWidth ); //可视区的宽度高度:你可以调整浏览器窗口大小调整的,body的高度不设置的话是根据内容来的,内容少,浏览器不出现滚动条,body的高度小于可视区高度,内容多,浏览器出现滚动条,body的高度大于可视区高度。
但是css3有个属性:box-sizing
box-sizing: content-box|border-box|inherit
比如,div1设置
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
padding: 50px;
border: 10px solid #000000;
}
</style>
box-sizing默认是content-box,就是width不包含padding和border的模式,测试,IE7+及其他浏览器正常,显示 clientWidth为50+200+50=300,offsetWidth为10+50+200+50+10=320,多了2边的border。
IE6下clientWidth为180,offsetWidth为200,因为6下的width是包含padding和border的,但是没人用ie6了,不细说
但是说明一个问题,clientWidth显示的很准确,就是实际width+padding的值,ie6下这个值比较小,也显示小了。
div1加上 box-sizing:border-box;再看看什么反应,IE7不认识 box-sizing:border-box; 出现结果和不加 box-sizing:border-box;一样,其他浏览器都是 clientWidth为180,offsetWidth为200。
结论就是:
1.clientWidth的值挺准确的,去掉边框的“盒子”占多少像素就显示多少像素。box-sizing的设置影响到了实际显示,也自然的影响到了clientWidth的值。
2.offsetWidth就是clientWidth加上两边border
3.clientWidth的值可以读,但是不能写。例如写: div1.clientWidth = 500; div1并不会变大,有些浏览器报警告或错误。
2. clientX,clientY是事件中的概念, 鼠标点击时候距离可视区的左侧和上侧坐标,数据是在事件的细节的event对象中
document.onclick = function (ev) {
//IE和谷歌用window.event
//火狐等用事件函数的第一个参数
var ev = ev || window.event;
console.log(ev.clientX,ev.clientY);
}
3.scrollTop、scrollLeft 是指页面内容太长,有滚动条了,已经滚动的距离。上面clientX和clientY都是针对可视区的,但是很多时候,我们想知道的是针对页面内容的距离,才方便我们下一步定位等操作,所以要结合scrollTop、scrollLeft使用
但是,但是,要注意:scrollTop它们存在兼容性问题。
浏览器出现滚动条是谁的? 答:只有谷歌浏览器认为滚动条是body的(document.body.scrollTop),其他浏览器都认为是html的,也就是可视区的(document.documentElement.scrollTop),为了在有限的范围显示大页面,才出现的滚动条。为了兼容,代码如下:
//有scrollTop和scrollLeft,没有scrollBottom和scrollRight
document.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
}
4. 待续
js获取元素宽高、位置相关知识汇总的更多相关文章
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- js 获取元素宽高
可以用源生js的.offsetHeight .offsetWidth属性 document.getElementById("temp_form").offsetHeight // ...
- js 获取元素宽
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}.这中情况通过#div1.style.width拿不到宽度,而通过#div1.offsetWidth才可以获取到宽度. 第 ...
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- 原生js获取元素的各种位置(大全)
加给元素: offsetLeft (距离定位父级的距离) offsetTop (距离定位父级的距离) offsetWidth (可视宽度) offsetHeight (可视高度) clientLeft ...
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- 滚动加载图片(懒加载)实现原理(这是旧实现,仅做为获取元素宽高api的参考)
https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...
- js获取各种宽高方法
屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...
随机推荐
- vue项目首屏加载优化实战
问题 单页面应用的一个问题就是首页加载东西过多,加载时间过长.特别在移动端,单页面应用的首屏加载优化更是绕不开的话题.下面我会写出我在项目中做的一些优化,希望大家能够相互讨论,共同进步. 我的项目vu ...
- Wolsey“强整数规划模型”经典案例之一单源固定费用网络流问题
Wolsey“强整数规划模型”经典案例之一单源固定费用网络流问题 阅读本文可以理解什么是“强”整数规划模型. 单源固定费用网络流问题见文献[1]第13.4.1节(p229-231),是"强整 ...
- C#线程安全使用(五)
CancellationToken的多种应用 这是线程安全的最后一篇了,主要介绍CancellationToken的多种应用. 1,ThreadPool直接启动线程,传递CancellationTo ...
- .NetCore采取JWT方式进行身份认证
验证与授权 Authentication(身份认证) 认证是系统对请求的用户进行身份识别的过程. Authorization (授权) 授权是对认证通过后的用户进行权限分配的过程.授权简单理解就是:识 ...
- SLAM+语音机器人DIY系列:(二)ROS入门——3.在ubuntu16.04中安装ROS kinetic
摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...
- 使用cookie来做身份认证
文章是msdn的官方文档,链接在这里.其实也有中文的文档,这里还是想做一个记录. 文章有asp.net core 2.x 和1.x 版本,我这里就忽略1.x了. 下面先说几点额外的东西有助于理解. A ...
- spring cloud feign 文件上传和文件下载
文件上传参考文档:http://blog.didispace.com/spring-cloud-starter-dalston-2-4/ 文件下载参考文档:https://blog.csdn.net/ ...
- 360浏览器兼容模式下IE内核版本
问题 最近在跟客户演示系统时,自己电脑IE 11下好好的,我们web系统最低支持到IE9.在客户电脑上,IE9浏览器下可以正常浏览,但是360兼容模式下,页面什么也不显示. 通过F12调试工具发现,3 ...
- iPhone手机怎么投影到MacPro上
https://www.bilibili.com/video/av27255821/ 2.使用Refletor,记得电脑和手机使用同一个wifi
- powershell-将powershell脚本排到JOB
Program/script下填写“Powershell”,表示这个脚本会在powershell环境下运行 Add arguments(optional)填写脚本绝对路径名称 Start in(Opt ...