js中各种距离clientWidth
1： offsetLeft、offsetTop、offsetHeight、offsetWidth
- 1.1 偏移参照——定位父级offsetParent
offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素
要理解offsetLeft、offsetTop、offsetHeight、offsetWidth ， 它们都是相对于offsetParent计算，主要分为下列几种情况 ：
- 1.2 计算方式见图：
备注：如果存在垂直滚动条，offsetWidth也包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight也包括水平滚动条的高度
1.3注意事项
【1】所有偏移量属性都是只读的
【2】如果给元素设置了display:none，则它的偏移量属性都为0
【3】每次访问偏移量属性都需要重新计算（避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能。）
2：clientHeight、clientWidth、clientTop、clientLeft
可视区大小client又称为可见大小或客户区大小，指的是元素内容及其内边距所占据的空间大小
2.1 clientHeight
clientHeight属性返回元素节点的可见高度
clientHeight = padding-top + height + padding-bottom2.2 clientWidth
clientWidth属性返回元素节点的可见宽度
clientWidth = padding-left + height + padding-right [注意]滚动条宽度不计算在内2.3 clientTop :
返回上边框的宽度2.4 clientLeft :
返回左边框的宽度2.５ 注意事项 :
【1】所有可视区client属性都是只读的
【2】如果给元素设置了display:none，则可视区client属性都为0
【3】每次访问可视区client属性都需要重新计算
3: scrollHeight、scrollWidth、scrollTop、scrollLeft
3.1 scrollHeight 元素的实际高度
3.2 scrollWidth 元素的实际宽度
3.3 scrollTop 如果出现y轴滚动条，那么就是 页面看不到的上边的高度
3.4 scrollLeft 如果x轴出现滚动条，那么就是 页面看不到的左边的宽度
4 : 事件 e 的一些距离
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。offsetX 设置或获取鼠标指针位置相对于触发事件的对象（自身）的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象（自身）的 y 坐标。screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。
js中各种距离clientWidth的更多相关文章
- .net中判断距离高考多长时间的js函数
在JS中判断距离高考(此处举例高考)的时间函数 JS中代码: function djs() { var severtime= new Date(); //获取服务器日期 var year=severt ...
- JS中各种宽度距离小结
js中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词解释 screen:屏幕.这一类取到的是关于屏幕的宽度和距离,与浏览器无关,应该 ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
- js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的区别
js中clientWidth, scrollWidth, innerWidth, outerWidth,offsetWidth的属性汇总,测试浏览器:ie7~ie11.chrome 和 firefox ...
- 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法
有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...
- js中的各种宽高以及位置总结
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之 ...
- document.body的一些用法以及js中的常见问题
document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight ...
- js中不同的height, top的对比
每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...
随机推荐
- git ignore文件
创建.gitignore文件来设置git要忽略的文件模式: 官方文件列列表:https://github.com/github/gitignore 1. 所有空行或者以 # 开头的行都会被 Git 忽 ...
- Ubuntu Server 使用 PPA 安装 Java (JDK) 8
前言 在 Ubuntu Server 中使用 PPA 安装 JDK 相比去 Oracle 官网下载包配置环境变量的好处是,安装方便快捷,还可以 apt-get 更新. 步骤 添加 Java 8 的 P ...
- Dijkstra算法图文详解
Dijkstra算法 Dijkstra算法算是贪心思想实现的,首先把起点到所有点的距离存下来找个最短的,然后松弛一次再找出最短的,所谓的松弛操作就是,遍历一遍看通过刚刚找到的距离最短的点作为中转站会不 ...
- HDU 5934 (强连同分量+缩点)
题意: 给出n个炸弹的信息 :坐标x , 坐标y , 爆炸半径 , 成本: 如果一个炸弹被引爆那这个范围的都爆炸 , 问最小的成本是多少? 题意:首先先来个n^2 暴力出某个炸弹爆炸波及的其他炸弹,用 ...
- Experimental Educational Round: VolBIT Formulas Blitz B
Description The city administration of IT City decided to fix up a symbol of scientific and technica ...
- Linux 系统排错
##root用户密码的修改 重启时按上下键打断引导,按“e”进入内核引导 在linux16行删除至途中所示位置,并进行修改: 修改完毕后按“ctrl+x”启动 进入系统切换到真实环境,开始修改root ...
- SvcUtil.exe导入WCF
1.SvcUtil.exe路径 vs2012.2013为C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\bin 2.添加外部工具 vs-工具-- ...
- 1 Groovy
1.1 什么是Groovy? groovy 是一个弱类型,动态语言,并且运行在JVM之上.它与java联系紧密.它是一个功能丰富和友好的java语言. Groovy源代码,通过Groovy编译器编译 ...
- VMware硬盘空间——扩容
VMware原来分配的硬盘空间太小了--扩容 找到VMware的安装路径,如我是默认安装的:C:\Program Files (x86)\VMware\VMware Workstation,打开该路径 ...
- 9-----BBS论坛
BBS论坛(九) 9.1.权限和角色模型定义 (1)cms/models class CMSPermission(object): ALL_PERMISSION = 0b11111111 # 1.访问 ...