JS——display：none 后获取元素的高度

最新推荐文章于 2022-07-14 10:02:46 发布

HarryHY

最新推荐文章于 2022-07-14 10:02:46 发布

阅读量1.1k

点赞数

分类专栏： JS 文章标签：前端

本文链接：https://blog.csdn.net/HarryHY/article/details/123955303

版权

本文探讨了在JavaScript中如何在元素设置`display: none`后仍然获取其准确高度的方法，这对于某些动态布局和计算需求是至关重要的。通过使用CSS计算属性和临时改变元素状态，可以实现这一目标。

摘要由CSDN通过智能技术生成

const calcHeight =()=>{
   
    let divevent :any = document.getElementsByClassName("rulediv");
    let arr =[]

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HarryHY

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

巧妙解决display：none元素无法输入的问题！全网最优解

m0_57024162的博客

09-17

1374

巧妙解决display：none元素无法输入的问题在使用selenium进行模拟浏览器操作时，大多数时候都能正常的完成输入和点击的问题，前提就是能定位的元素，而有些元素的display为none，这就导致了我们通过selenium脚本是无法定位到这个元素的。目前网上大多数方法都是通过js方法修改元素的display属性，但经过我的测试，并不是非常凑效。但是有一种方法，不仅比js方法更简单，而且更有效！！！那就是———Helium！ Helium的安装方法很简单，win10系统只需要打开cmd命令然后输入

javascript获取隐藏元素(display:none)的高度和宽度的方法

01-19

js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];}但是如果这个元素是隐藏(display:none)的，尺寸又是未知自适应的，哪有上面的方法就不行了！因为display:none的元素是没有物理

1 条评论您还未登录，请先登录后发表或查看评论

关于display:none元素的宽高获取问题

lqx_sunhan的博客

04-14

7150

在做项目的时候碰到的这个问题，最后解决了，记录一下:分几种情况:1.正常情况 <div style="width:500px; height:300px;"> <div id="div1" style="width:100%; height:100%; background-color:red;"> <div id="child" style="widt

JS无法获取display为none的隐藏元素的宽度和高度的解决方案

weixin_34405557的博客

03-06

511

在实际开发中会遇到确实需要获取隐藏元素的宽高，这儿所说的隐藏元素是display为none的元素。可使用jQuery Actual Plugin插件来完成，其源码如下： ;( function ( $ ){ $.fn.addBack = $.fn.addBack || $.fn.andSelf; $.fn.extend({ actual : function...

javascript获取隐藏元素(display:none)的高度和宽度的方法(转)

dragoo1的专栏

12-11

1万+

类型：转载时间：2014-06-06 这篇文章主要介绍了javascript获取隐藏元素(display:none)的高度和宽度的方法,实现方法比较复杂,需要的朋友可以参考下 js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法：代码如下: function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和

获取display:none的元素的宽度和高度

weixin_30540691的博客

05-01

1536

display为none的元素不能通过offsetWidth和offsetHeight来获取宽高（未参与css渲染），解决方案：可以通过在display为none的元素使用行内样式style设置宽高，通过style.width 和style.height获取，注意：样式不能写字css文件中。否则获取不到转载于:https://www.cnblogs.com/renbo/p/8977880...

DOM对象（一）——DOM对象介绍、获取元素、事件和样式操作（包括案例：仿京东显示密码点击关闭二维码等）

m0_53619602的博客

07-14

1086

浏览器渲染流程

weixin_46212761的博客

08-13

139

浏览器渲染流程渲染流程构建DOM树构建CSSOM树构建Render树布局绘制什么是DOM树 DOM是文档对象模型（Document Object Model）的简称，是HTML文档的对象表示。DOM Tree是指通过DOM将html页面进行解析生成HTMl Tree树状结构和对应访问方法，DOM节点树结构如下。百度百科如何构建DOM树当浏览器接收到由服务器端返回的报文中或从本地磁盘中获取到的HTML网页和资源时，由于初始时是字节形式的数据，因此浏览器会根据指定的编码方式（如ut

javascript获取元素偏移量的方法有哪些

10-25

本文将详细介绍四个主要的属性——offsetHeight、offsetWidth、offsetLeft和offsetTop，它们可以帮助我们获取元素相对于其包含元素的偏移量。 1. offsetHeight: `offsetHeight` 属性返回元素的总高度，包括了元素...

无法获取隐藏元素宽度和高度的解决方案

08-31

本文主要介绍了无法获取隐藏元素（display:none）宽度(width)和高度(height)的解决方案，具有很好的参考价值。下面跟着小编一起来看下吧

父级（display:none）隐藏时，子节点的高度获取。

weixin_33712881的博客

12-18

556

当父节点display:none的时候，子节点的高度是0获取不到。解决办法：用visibility替换display就可以了。转载于:https://www.cnblogs.com/nyth/p/3480764.html

html中js隐藏div的高度,javascript获取隐藏元素(display:none)的高度和宽度的方法

weixin_30199835的博客

06-03

673

js获取隐藏元素的尺寸这是test容器，可见容器这是test容器，可见容器这是test容器，可见容器这是test容器，可见容器这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，这是test容器，点我//判断对象类型function getType(o)...

Vue 之获取元素高度

gyueh的博客

09-17

1510

html部分如下 <div ref="enterBox"></div> js部分代码如下： created() { // 获取可视区域的宽度和高度 this.getEnterBoxStyle() }, methods: { getEnterBoxStyle() { // 页面渲染完成后的回调 this.$nextTick(() => { const viewsWidth = window.getCompu

vue 获取元素高度

w36680130的博客

01-02

2406

本文转载自：https://www.cnblogs.com/silences/p/7743686.html 作者：silences 转载请注明该声明。<div ref="elememt" ></div> //获取高度值 var height= this.$refs.text.offsetHeight; //100 //获取元素样式值,element 为元素...

计算 display:none 的实际高度

ijiabao的博客

08-29

676

在不影响原有布局的情况, 设置元素为 display:block, height:0, overflow:hidden, 再取dom.scrollHeight即可 es6代码: function getDomHeight(el){ let origStyle = el.getAttribute('style'); // 原有的style,备份一下 Object.assign(el....

JS获取display为none的隐藏元素的宽度和高度的解决方案

寂寥人生

07-02

941

https://www.bbsmax.com/A/A7zgKYwoz4/

js中设置控件的隐藏与显示(display:none)