JS中clientWidth offsetWidth innerWidth scrollWidth等区分
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要。放上经典图,一张图让你搞懂clientWidth,offsetWidth,scrollHeight~~~
除了这些还有clientX,pageX,screenX等等,再来看下下面的图
一、clientWidth、clientHight
—这两个属性可以获取元素的可见宽度和高度
—这些属性都不带px的,返回的是一个数字,可以直接用来计算
—会获取元素的宽度和高度,包括内容区跟内边距
—这些属性都是只读的,不可修改
二、offsetWidth、offsetHeight
—获取元素的整个宽度和高度,包括内容区,内边距和边框
三、offsetParent
—可以用来获取当前元素的定位父元素
—会获取到离当前元素最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则去找html,也就是包含块的概念
四、offsetLeft、offsetTop
offsetLeft
-当前元素相对于其定位父元素的水平偏移量
offsetTop
-当前元素相对于其定位父元素的垂直偏移量
五、scrollWidth、scrollHeight
-可以获取元素整个滚动区的宽度高度
scrollLeft -可以获取水平滚动条滚动的距离
scrollTop -可以获取垂直滚动条滚动的距离
六、innerHeight、innerWidth
(1)innerHeight属性:窗口中文档显示区域的高度,不包括菜单栏、工具栏等部分。该属性可读可写。
IE不支持该属性,IE中body元素的clientHeight属性与该属性相同。
(2)innerWidth属性:窗口中文档显示区域的宽度,同样不包括边框。该属性可读可写。
IE不支持该属性,IE中body元素的clientWidth属性与该属性相同。
七、总结:
- clientLeft,clientTop
表示内容区域的左上角相对于整个元素左上角的位置(包括边框)。(取决于边框的像数值?) - clientWidth,clientHeight
内容区域的宽高,不包括边框宽度值。 - clientX、clientY
点击位置距离当前body可视区域的x,y坐标 - offsetLeft,offsetTop
相对于最近的祖先定位元素。 - offsetParent
某元素的父元素 例如:this.offsetParent.tagName.toLowerCase() 得到body... - offsetWidth,offsetHeight
整个元素的尺寸(不包括因为滚动条变宽的宽度,包括滚动条的宽度和高度) - offsetX, offsetY
相对于带有定位的父盒子的x,y坐标 - scrollLeft,scrollTop
元素滚动的距离大小 - scrollWidth,scrollHeight
整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分) scrollWidth = scrollTop+clientWidth - pageX、pageY
对于整个页面来说,包括了被卷去的body部分的长度 - screenX、screenY
点击位置距离当前电脑屏幕的x,y坐标 - x、y
和screenX、screenY一样
JS中clientWidth offsetWidth innerWidth scrollWidth等区分相关推荐
- js中单击和双击事件的区分
js中单击和双击事件的区分 1. 首先要了解鼠标点击(单击或双击)时包含的事件. mousedown 事件: 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.与 cl ...
- clientWidth offsetWidth innerWidth 区别(窗口尺寸 汇总)
原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽,不包边线宽度,会随 ...
- JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...
- JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
- js中clientWidth、scrollLeft、offsetX等宽高度和位置的用法
文章目录 前言 一.clientWidth / clientHeight 二.clientLeft / clientTop 三.clientX / clientY 四.scrollWidth / sc ...
- javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
关于js中的offsetWidth.clientWidth.scrollWidth等一系列属性及其方法一直都傻傻分不清,这里就来总结一下这些方法的用法和含义. 注意: 下面元素属性和元素方法都通过 e ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: 1.width()方法用于获得元素内容所占的宽度: 2.innerWidth()方法用于获得包括内边界(padding)的元素宽度: 算式:innerWidth()=width()+ ...
- js获取屏幕尺寸、clientWidth、offsetWidth、scrollWidth等区别
js获取元素/屏幕宽高 总结如下 1.获取网页可视区域宽高(随着页面的缩放,所获取的值会相应改变) 方法一.不包括滚动条的宽高在内 document.documentElement.clientWid ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.b ...
最新文章
- 黑客进阶必读书《Linux命令行与Shell脚本编程大全》(第2版)
- 嗨,你真的懂this吗?
- 如何在MySQL中创建存储过程
- android intent-filter category,android intent-filter category.DEFAULT
- 前端路由跳转丢失端口号_如何在应用架构中设计微前端方案 icestark
- python编译出来的程序员_Windows下编译Python2.7源码
- can总线配置读入是什么意思_CAN总线基础知识学习笔记
- 上周Asp.net源码(11.5-11.10)免费下载列表
- python中的赋值运算符_整理Python中的赋值运算符
- 为什么不使用ipv6计算机网络,ipv6无网络访问权限解决教程
- Contexts for mac(程序快速调用工具)
- 系统时间与服务器时间同步出错,Win7电脑时间同步出错是怎么回事?系统时间同步失败如何解决?...
- 进程同步与互斥——吸烟者问题源码实现(cigarette smoker’s problem)
- python的乐高积木——函数
- Java Word文档模板内容替换
- codeforces 417D. Cunning Gena 状压dp
- 最强大脑魔方墙模拟程序(工具)
- java 基础知识学习2
- 转载:关于NERO7刻录软件的使用
- 想用这种方法跳槽加薪,太幼稚了!
热门文章
- Python按照你的检索爬取天津大学图书馆书籍信息
- root_path运用python_Python app.root_path方法代碼示例
- 信息安全-网络安全主动防御技术与应用(二)
- 【中钞区块链技术研究院推出区块链小程序应用】GBCAX
- 前端/客户端/中间件/后端/核心开发—方向选择
- Mel Frequency Cepstral Coefficients (MFCCs)
- VIM向上搜索和向下搜索
- 网络编程 WSAStartup
- CRD500:Modelsim仿真问题
- 保姆级安装,在FusionCompute上搭建华为V6存储仿真器,并通过iscsi映射给Windows主机