JS--获取元素的高度与宽度

news2024/11/18 21:32:39

原文网址:JS--获取元素的高度与宽度_IT利刃出鞘的博客-CSDN博客

简介

说明

本文介绍如何使用JavaScript获取HTML标签的高度与宽度。

读取的方法

document.getElementById("id").clientHeight

元素的尺寸属性

元素尺寸属性

说明

clientWidth

获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域

clientHeight

获取元素可视部分的高度,即 CSS 的 height 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域

offsetWidth

元素在页面中占据的宽度总和,包括 width、padding、border 以及滚动条的宽度

offsetHeight

元素在页面中占据的高度总和,包括 height、padding、border 以及滚动条的宽度

scrollWidth

当元素设置了 overflow:visible 样式属性时,元素的总宽度,也称滚动宽度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域

scrollHeight

当元素设置了 overflow:visible 样式属性时,元素的总高度,也称滚动高度。在默认状态下,如果该属性值大于 clientWidth 属性值,则元素会显示滚动条,以便能够翻阅被隐藏的区域

示意图

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

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

相关文章

CentOS7非lvm给根分区扩容

首先查看现有磁盘信息和文件系统的信息 关闭虚拟机,右键虚拟机,点击设置,选中硬盘,右边点击拓展,然后给磁盘空间增加到指定的大小 打开虚拟机,查看扩容后的分区大小,此时会发现根分区大小并…

threejs(10)-WEBGL与GPU渲染原理(难点)后期再消化亦可

一、渲染管线 WebGL 是什么 WebGL (Web图形库)是一个JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点,该API可以在HTML5 元素中使用。这种一致性使API可以利用用户设备提…

Airtest 如何测试手机 APP?

引言 Airtest 是网易出品的一款基于图像识别的自动化测试工具,主要应用在手机 APP 和游戏的测试。一旦使用了这个工具进行 APP 的自动化,你就会发现自动化测试原来是如此简单!! 如果对软件测试、接口、自动化、性能测试、测试开…

Git 入门指南:从新手到高手的完全指南

Git是一种强大的分布式版本控制系统,广泛应用于软件开发中。它的使用不仅可以帮助开发团队更好地管理代码,还可以提高团队协作效率和代码质量。随着软件开发的不断发展,版本控制成为了程序员必备的一项技能。 Git的基本概念 Git的基本概念对…

阿里云服务器双11特惠99元一年云服务器ECS经济型e实例

2023阿里云服务器双11优惠价格99元一年经济型e实例,并且续费不涨价,云服务器ECS-经济型e实例2核2G配置、3M带宽、40G ESSD entry系统盘优惠价99元一年,原价956.64元/年,可用于中小型网站建设、开发测试、小程序或app搭建&#xff…

十九、类型信息(4)

本章概要 注册工厂类的等价比较反射:运行时类信息 类方法提取器 注册工厂 从 Pet 层次结构生成对象的问题是,每当向层次结构中添加一种新类型的 Pet 时,必须记住将其添加到 LiteralPetCreator.java 的条目中。在一个定期添加更多类的系统…

锁表后引发的几种删除方式与不同的扩展

在开发过程可能会遇到一些特殊场景,诸如我想删除某表,但是无法删除,去找原因发现是发生了锁表, 锁表指的是在执行一个事务时,该事务获取了一个锁并保持其锁定状态,直到事务完成或手动释放锁,导…

【零参考GAN:Pansharpening】

ZeRGAN: Zero-Reference GAN for Fusion of Multispectral and Panchromatic Images (用于多光谱和全色图像融合的零参考GAN) 本文提出了一种融合低空间分辨率多光谱(LR MS)和高空间分辨率全色(PAN)图像的新的全色锐化方法–零参考生成对抗网络(ZeRGAN…

深度学习之基于ResNet18的神经网络水果分类系统

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介二、功能三、神经网络水果分类系统四. 总结 一项目简介 基于ResNet18神经网络的水果分类系统是一个利用深度学习技术进行水果图像分类的系统。下面是该系统…

WOS与CNKI数据库的citespace分析教程及常见问题解决

本教程为面向新手的基于citespace的数据可视化教程,旨在帮助大家更快了解行业前沿的研究内容。 获取最新版本的citespace软件 在citespace官网下载最新的版本(如果是老版本,可能会提示让你去官网更新为最新版,老版本不再提供服务…

【Linux】开发工具——vim多模式编辑器的入土设置sudoers白名单

个人主页点击直达:小白不是程序媛 Linux系列专栏:Linux被操作记 目录 前言: 基本概念 vim基本操作 [正常模式]切换至[插入模式] [插入模式]切换至[正常模式] [正常模式]切换至[末行模式] 三种模式的切换关系图 vim命令模式命令集 进…

Redis入门01-简单了解

目录 Redis的发展历史 特性简介 数据类型 内存存储与持久化 功能丰富 简单稳定 应用场景 为啥用Redis Redis的发展历史 Redis(Remote Dictionary Server)是一个高性能的键值存储系统,通常用作缓存、消息队列和分布式数据存储的解决方…

【React】03.脚手架的进阶应用

文章目录 暴露webpack配置暴露前后的区别config文件夹:scripts文件夹:package.json 常见的配置修改1.把sass改为less2.配置别名3.修改域名和端口号4.修改浏览器兼容5.处理Proxy跨域 2023年最新珠峰React全家桶【react基础-进阶-项目-源码-淘系-面试题】 …

uniapp如何使用mumu模拟器

模拟器安装 下载地址:MuMu模拟器 模拟器相关设置 1.在设置-显示中选中手机版,设置手机分辨率 2.设置-关于手机-版本号快速点击,将其设置为开发者模式 3.选择多开器 4.打开hbuilderx,找到adb设置 5.配置adb路径及端口号&#x…

网络爬虫适合什么代理IP?如何使用?

在互联网时代之下,大数据对各行各业的发展有着重要的推动作用,而说到数据采集,必不可少的就是去使用爬虫工作。 一、什么是网络爬虫? 它是一种按照一定的规则自动游览、检索网页信息的程序或者脚本,通过自动请求目标…

《鸿门宴》文

鸿门宴 【作者】司马迁 【朝代】汉 沛公军霸上,未得与项羽相见。沛公左司马曹无伤使人言于项羽曰:“沛公欲王关中,使子婴为相,珍宝尽有之。”项羽大怒曰:“旦日飨士卒,为击破沛公军!”当是时&a…

SpringCloud Gateway实现请求解密和响应加密

文章目录 前言正文一、项目简介二、核心代码2.1 自定义过滤器2.2 网关配置2.3 自定义配置类2.4 加密组件接口2.5 加密组件实现,AES算法2.6 启动类,校验支持的算法配置 三、请求报文示例四、测试结果4.1 网关项目启动时4.2 发生请求时 前言 本文环境使用比…

【C++的OpenCV】第十五课-OpenCV的绘图工具(rectangle、circle、line、polylines、putText)常用方法简介

🎉🎉🎉 欢迎各位来到小白 p i a o 的学习空间! \color{red}{欢迎各位来到小白piao的学习空间!} 欢迎各位来到小白piao的学习空间!🎉🎉🎉 💖 C\Python所有的入…

【错误解决方案】ModuleNotFoundError: No module named ‘xgboost‘

1. 错误提示 在尝试导入名为xgboost的模块时出现了ModuleNotFoundError。 错误提示:ModuleNotFoundError: No module named xgboost 这个错误通常意味着Python环境中没有安装你试图导入的模块。 2. 解决方案 安装xgboost模块即可解决上述问题。 可以通过Python…

企业多部门VLAN间互访部署实战

1. 二层VLAN技术部署回顾; 2. 三层交换机上如何部署VLAN? 3. 部署VLAN的过程中有哪些注意事项? -- VLAN技术 - 虚拟局域网 -- 局域网 - 通过交换机连接的网络 -- VLAN - 把一个大的局域网 做一个分割 -- 常见局域网的问题&a…