JavaScript_Element对象_获取元素位置

news2024/11/26 15:39:32

1、Element.clientHeight,Element.clientWidth(常用)

Element.clientHeight属性返回一个整数值,表示元素节点的CSS高度(单位像素),只对块级元素生效,对于行内元素返回0。如果块级元素没有设置CSS高度,则返回实际高度除了元素本身的高度,它还包括padding部分,但是不包括border、margin。如果有水平滚动条,还要减去水平滚动条的高度。注意,这个值始终是整数,如果是小数会被四舍五入。

Element.clientWidth属性返回元素节点的CSS宽度,同样只对块级元素有效,也是只包括元素本身的宽度和padding,如果有垂直滚动条,还要减去垂直滚动条的宽度。document.documentElement的clientHeight属性,返回当前视口的高度(即浏览器窗口的高度)。document.body的高度则是网页的实际高度。 

2、Element.clientLeft,Element.clientTop

Element.clientLeft属性等于元素节点左边框(left border)的宽度(单位像素),不包括左侧的padding和margin。如果没有设置左边框,或者是行内元素(display:inline),该属性返回0。该属性总是返回整数值,如果是小数,会四舍五入

Element.clientTop属性等于网页元素顶部边框的高度(单位像素) 

3、Element.scrollHeight,Element.scrollWidth

Element.scrollHeight属性返回一个整数值(小数会四舍五入),表示当前元素的总高度(单位像素),它包括padding,但是不包括border、margin以及水平滚动条的高度(如果有水平滚动条的话)

Element.scrollWidth属性表示当前元素的总宽度(单位像素),其他地方都与scrollHeight属性类似。

这两个属性只读整张网页的总高度可以从document.documentElement或document.body上读取 

 

4、Element.scrollLeft,Element.scrollTop

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量。

Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。(常用)

对于那些没有滚动条的网页元素,这两个属性总是等于0。如果要查看整张网页的水平的和垂直的滚动距离,要从document.documentElement元素上读取 

5、Element.offsetHeight,Element.offsetWidth(常用)

Element.offsetHeight属性返回一个整数,表示元素的CSS垂直高度(单位像素),包括元素本身的高度、padding和border,以及水平滚动条的高度(如果存在滚动条)。

Element.offsetWidth属性表示元素的CSS水平宽度(单位像素),其他都与Element.offsetHeight一致。

这两个属性都是只读属性,只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的CSS设为不可见(比如display:none;),则返回0。

6、Element.offsetLeft,Element.offsetTop

Element.offsetLeft返回当前元素左上角,相对于Element.offsetParent节点的水平位移,Element.offsetTop返回垂直位移,单位为像素。

通常,这两个值是指相对于父节点的位移 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1177670.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Web】在前端中,HTML<meta>标签

<meta>实例 <head><meta name"description" content"免费在线教程"><meta name"keywords" content"HTML,CSS,XML,JAVASCRIPT"><meta name"author" content"runoob"><meta char…

three.js 航拍全景图(+陀螺仪)

右上角陀螺仪也可点击,需要https的环境,手动下载DeviceOrientationControls.js文件 后台包含打点功能 <template><div id"quanjing" style"width: 100vw; height: 100vh; overflow: hidden"><spanid"tip"style"position: ab…

骨骼动画详解

【物体怎么样是在动】 当物体的位置、朝向、大小即Transform有任意一者发生变化时&#xff0c;物体在动。 但变化要达到一定的幅度时&#xff0c;我们会看到物体在动&#xff0c;幅度是多少却决于我们看这个物体的距离、方向&#xff0c;物体的朝向等因素。 这里说的幅度是指…

【Windows】解决电脑可以正常使用微信,但是打不开网页

问题 啊哈 如题&#xff0c;在安装软件的过程中突然就发现浏览器不能用了&#xff0c;但是微信可以正常接发消息。 记录一下解决过程。 解决 1、自动DNS 打开控制面板->网络和Internet->网络和共享中心&#xff0c;点击以太网&#xff0c;找到属性Internet协议4(TCP/…

手机怎么打包?三个方法随心选!

有的时候&#xff0c;电脑不在身边&#xff0c;只有随身携带的手机&#xff0c;这个时候又急需把文件打包发送给同事或者同学&#xff0c;如何利用手机操作呢&#xff1f;下面介绍了具体的操作步骤。 一、通过手机文件管理自带压缩功能打包 1、如果是iOS系统&#xff0c;就在手…

猫头虎分享从Python到JavaScript传参数:多面手的数据传递术

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

dell r720

dell r720的idrac的地址默认是192.168.1.110&#xff0c;root 默认密码calvin fatal Error! All channnels have been disabled due to all DIMMs failed the Memoey 是什么意思 Dell PowerEdge T320服务器 开机显示 Fatal Errort!all channells have been disabled due to …

【鹰王系统】又一个干净纯净的window系统下载站点,值得推荐!

今天给大家分享一个高质量的window系统下载站点【鹰王系统】&#xff0c;此站长自己制作了winxp、win7、win10、win11等各种版本系统&#xff0c;都是非常不错的系统镜像&#xff0c;都是免费下载没有任何捆绑信息&#xff0c;值得推荐。 网站首页截图 系统下载截图&#xff1a…

Java 高效生成按指定间隔连续递增的列表(int,double)

简介 Java 按照指定间隔生成连续递增的List 列表&#xff08;引入Stream 类和流操作来提高效率&#xff09;&#xff1a; 1. 生成递增的List< Integer> Testpublic void test009(){int start 1;int interval 2;int count 10;List<Integer> list IntStream.ite…

集群外访问计算节点gpu上的web链接

情况描述 现在有一个程序&#xff0c;通过提交作业的方式在集群的计算节点C上运行&#xff0c;运行后给了一个web的地址,如下图所示 然而&#xff0c;在自己电脑A上只能访问集群的管理节点B&#xff0c;无法直接访问计算节点。管理节点可以访问计算节点&#xff0c;计算节点无…

Git extension 中合并工具kdiff3乱码问题

打开kdiff3合并工具&#xff0c;setting->region settings 设置下面的编码格式为utf-8就可以啦&#xff01; 注意&#xff1a;需要在合并工具中设置编码格式&#xff0c; 在git 中配置编码格式没有效果

Keep-Alive中通过component多次加载同样的动态组件无法保持状态的解决办法

Keep-Alive中通过component多次加载同样的动态组件无法保持状态的解决办法 Keep-Alive中通过component多次加载同样的动态组件无法保持状态的解决办法 | 软件开发服务商 (yidianhulian.com)https://yidianhulian.com/?p12263 问题描述 项目功能上有需要动态添加组件的需求&…

Python学习-shutil模块和OS模块学习

shutil模块 针对文件的拷贝&#xff0c;删除&#xff0c;移动&#xff0c;压缩和解压操作 # 1.copyfileobj只能复制文件内容&#xff0c;无法复制权限#复制文件时&#xff0c;要选择自己有权限的目录执行操作&#xff0c;创建的文件会根据系统umask设定的参数来指定用户权限 s…

Ubuntu 18.04.6 LTS安装docker和docker-compose、镜像导入导出

Ubuntu 18.04.6 LTS安装docker和docker-compose、镜像导入导出 文章目录 Ubuntu 18.04.6 LTS安装docker和docker-compose、镜像导入导出安装docker更新数据源&#xff0c;安装必要插件添加GPG密钥设置存储库再更新apt包索引安装docker-ce查看docker状态运行docker hello-world …

医学专题(6)--多组学在肿瘤分型研究中的应用思路

研究背景 肿瘤免疫分型的由来&#xff1a;每一种肿瘤&#xff0c;甚至每一位患者的肿瘤浸润免疫细胞都存在差异&#xff0c;研究者根据免疫细胞浸润的特点将肿瘤大致分为“冷”肿瘤和“热”肿瘤&#xff0c;此概念的提出是肿瘤免疫分型的雏形。 对肿瘤免疫分型的研究有很多&a…

HDFS速通之一文详解HDFS全部知识点

文章目录 HDFS介绍HDFS体系HDFS的Shell介绍HDFS的常见Shell操作 HDFS案例实操Java操作HDFS配置环境 HDFS的回收站HDFS的安全模式实战&#xff1a;定时上传数据至HDFSHDFS的高可用和高扩展HDFS的高可用(HA)HDFS的高扩展(Federation) HDFS介绍 HDFS是一个分布式的文件系统 假设…

二叉树的最大深度(C++解法)

题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3示例 2&#xff1a; 输入&#xff1a;root [1,null,2…

2005-2021年全国各省家庭承包耕地面积和家庭承包耕地流转总面积数据(无缺失)

2005-2021年全国各省家庭承包耕地面积和家庭承包耕地流转总面积数据 1、时间&#xff1a;2005-2021年 2、来源&#xff1a;农村经营管理统计NB 3、指标&#xff1a;家庭承包经营耕地面积、家庭承包耕地流转总面积&#xff08;单位&#xff1a;亩&#xff09; 4、范围&#…

MVC、MVP、MVVM区别

MVC、MVP、MVVM区别 MVC&#xff08;Model-View-Controller&#xff09; 。是一种设计模式&#xff0c;通常用于组织与应用程序的数据流。它通常包括三个组件&#xff1a;模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和控制器&#xff08;Controller&…

【OpenVINO】基于 OpenVINO C++ API 部署 RT-DETR 模型

基于 OpenVINO C API 部署 RT-DETR 模型 1. RT-DETR2. OpenVINO3. 环境配置4. 模型下载与转换4.1 模型导出4.2 模型信息对比 5. C代码实现5.1 模型推理类实现 5.2 模型数据处理类RTDETRProcess6. 预测结果展示7. 总结 RT-DETR是在DETR模型基础上进行改进的&#xff0c;一种基于…