原生js获取元素的各种位置(大全)
加给元素:
- offsetLeft (距离定位父级的距离)
- offsetTop (距离定位父级的距离)
- offsetWidth (可视宽度)
- offsetHeight (可视高度)
- clientLeft (左边框宽度)
- clientTop (上边框宽度)
- clientWidth(width + padding)
- clientHeight(height + padding)
- scrollTop(纵向滚动距离)
- scrollLeft(横向滚动距离)
- scrollWidth(内容宽度)
- scrollHeight(内容高度)
getBoundingClientRect ( ) 返回值:对象 有6个属性
- left(元素左侧相对于可视区左上角的距离)
- right(元素右侧相对于可视区左上角的距离)
- top(元素上边相对于可视区左上角的距离)
- bottom(元素下边相对于可视区左上角的距离)
- width(可视宽度)
- height(可视高度)
获取可视区宽高:
- window.innerWidth
- window.innerHeight
- document.documentElement.clientWidth
- document.documentElement.clientHeight
屏幕宽高:
- window.screen.width
- window.screen,height
获取文档宽高:
- document.body.clientWidth
- document.body.clientHeight
- document.documentElement.scrollWidth
- document.documentElement.scrollHeight
- document.body.scrollWidth(如果内容宽度超过一屏,得到文档宽度;如果内容小于一屏,得到一屏的宽度)
- document.body.scrollHeight (如果内容高度超过一屏,得到文档高度;如果内容小于一屏,得到一屏的高度)
获取滚动条距离:
- document.body.scrollTop
- document.body.scrollLeft
- window.scrollY
- window.scrollX
- document.documentElement.scrollTop
- document.documentElement.scrollLeft
- window.pageYOffset
- window.pageXOffset
原生js获取元素的各种位置(大全)的更多相关文章
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...
- 原生JS获取元素的位置与尺寸
1.内高度.内宽度: 内边距 + 内容框 element.clientWidth element.clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 element.offs ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...
- 原生js获取元素style属性
function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { r ...
- 【全面总结】js获取元素位置大小
[js获取元素位置+元素大小]全面总结 目录 1.关于offset offsetParent(只读) offsetTop(只读) offsetLeft(只读) offsetHeight(只读) off ...
随机推荐
- System.Timers.Timer
前言 System.Timers.Timer组件是基于服务器的计时器,它能够指定在应用程序中引发Elapsed事件周期性间隔,以处理相应事件. 使用示例: 运行结果展示: System.Timers. ...
- 虚拟机 VMware Workstation Pro 15.5.0 及永久激活密钥
虚拟机 VMware Workstation Pro 15.5.0 及永久激活密钥 虚拟机下载地址:https://download3.vmware.com/software/wkst/file/VM ...
- Vs Code在Vue项目中v-for指令提示错误的解决办法
最近在做一个Vue项目,在其中用到v-for指令时,发现Vs Code报错,如下图(代码是没有任何问题的),在网上找了一下解决办法,希望能帮助到更多人. 解决方法: 打开 文件-首选项-设置 将 ...
- 【K8S】K8S部署Metrics-Server服务
写在前面 在新版的K8S中,系统资源的采集均使用Metrics-Server服务,可以通过Metrics-Server服务采集节点和Pod的内存.磁盘.CPU和网络的使用率等信息. 读者可参考< ...
- 超轻量级网络SqueezeNet网络解读
SqueezeNet网络模型非常小,但分类精度接近AlexNet. 这里复习一下卷积层参数的计算 输入通道ci,核尺寸k,输出通道co,参数个数为: 以AlexNet第一个卷积为例,参数量达到:3*1 ...
- Jenkins 部署(基于 windows)
一.安装 jdk,配置环境变量 二.安装 tomcat 和 jenkins 1.检查电脑上 8080 端口是否被占用: 命令行中输入:netstat -ano 2.下载Tomcat Tomcat官方网 ...
- unittest(生成 HTMLTestRunner 模块)
一:生成 HTMLTestRunner 模块 unittest 里面是不能生成 html 格式报告的,需要导入一个第三方的模块:HTMLTestRunner 方法1.这个模块下载不能通过 pip 安装 ...
- Mybatis时间范围查询,亲测有效
Md2All export document .output_wrapper pre code{font-family: Consolas, Inconsolata, Courier, monospa ...
- 写给Android 混淆小白的快速混淆方法
为啥子要混淆 简单来说,Android 进行ProGuard,可以起到压缩,混淆,预检,优化的功能,虽然不能说更安全但还是一个不容忽视的环节. 开始混淆第一步 首先在build.gradle 中将混淆 ...
- 线段树 逆序对 Minimum Inversion Number HDU - 1394 Laptop
Minimum Inversion Number HDU - 1394 求最小反转数,就是求最少的逆序对. 逆序对怎么求,就是先把所有的数都初始化为0,然后按照顺序放入数字,放入数字前查询从这个数往后 ...