JS获取display为none的隐藏元素的宽度和高度的解决方案入门基础_元素使用攻略

有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案,获取display为none元素的子元素的物理尺寸。方案一:1、利用给元素添加行内样式:display:block;position:absolute;z-index:-

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

有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案,获取display为none元素的子元素的物理尺寸。

JS获取display为none的隐藏元素的宽度和高度的解决方案入门基础_元素使用攻略

方案一:

1、利用给元素添加行内样式:display:block;position:absolute;z-index:-1000
2、让隐藏元素变成block同时利用定位带出可视区,再获取下面元素的物理尺寸后
3、再给它还原成display为none,最后返回结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获获取display为none元素的子元素的物理尺寸 :解决方案一</title>
</head>
<body>
    <div class="wrap"  style="display: none;">
        <ul>
            <li>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
            </li>
            <li>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
            </li>
            <li>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
            </li>
        </ul>
    </div>
</body>
<script>

//  获取display为none元素下的子元素的高度
function getHeight(parentSelector,childSelector){
    let wrap =  document.querySelector(parentSelector);
    let  aLi =  wrap.querySelectorAll(childSelector);
    let  arr =  [];
    wrap.style.cssText = `display:block;position:absolute;z-index:-1000;`
    for (var i = 0; i < aLi.length; i++) {
        arr.push(aLi[i].offsetHeight)
    }
    wrap.style.cssText = "display:none;"
    return arr
}
console.log(getHeight('.wrap','li'))
</script>
</html>

方案二:不推荐

1、这个方法需要用户事件触发让隐藏元素显示出来
2、开启一个定时器,间隔判断隐藏元素是否显示了
3、如果显示了,清除定时器,拿到结果再去操作  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获获取display为none元素的子元素的物理尺寸 :解决方案二</title>
</head>
<body>
    <div class="wrap"  style="display: none;">
        <ul>
            <li>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
            </li>
            <li>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
            </li>
            <li>
                <p>前端技术</p>
                <p>前端技术</p>
                <p>前端技术</p>
            </li>
        </ul>
    </div>

    <button class="btn">按钮</button>
</body>
<script>

//  获取display为none元素下的子元素的高度

let wrap =  document.querySelector('.wrap');
let  aLi =  wrap.querySelectorAll('li');
let  arr =  [];
let timer=null;
timer = setInterval(function(){
    // 用户操作后 让隐藏隐藏元素显示了 则获取结果 清除定时器
    if(wrap.offsetHeight > 0){
        for (var i = 0; i < aLi.length; i++) {
            arr.push(aLi[i].offsetHeight)
        }
        clearInterval(timer)

        console.log(arr)
    }
},1000)
    
document.querySelector('.btn').onclick=function(){
    wrap.style.cssText = "display:block;"
}
</script>
</html>

方案三:

1、利用给元素添加行内样式:visibility:hidden

2、让隐藏元素变成有物理尺寸存在,但不可见

3、再给它还原成display为none,最后返回结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取display为none元素的物理尺寸解决方案</title>
</head>
<body>
    <div class="container" style="display: none;">
        <p>前端技术</p>
        <p>前端技术</p>
        <p>前端技术</p>
    </div>
</body>
<script>

//  获取display为none元素的高度
function getSizeAttr(elementSelector,attrName){
    let oDiv =  document.querySelector(elementSelector);
    oDiv.style.cssText = `visibility:hidden`
    let attr = {
        height: oDiv.offsetHeight,
        width: oDiv.offsetWidth,
        offsetLeft: oDiv.offsetLeft,
        offsetTop: oDiv.offsetTop
    }
    oDiv.style.cssText = `display:none`;
    return attr[attrName]
}
console.log(getSizeAttr('.container','width'))
console.log(getSizeAttr('.container','height'))
console.log(getSizeAttr('.container','offsetLeft'))
console.log(getSizeAttr('.container','offsetTop'))
</script>
</html>

小结:

利用先把所有隐藏元素变成可以获取物理尺寸,获取完毕再给它变成隐藏,再返回我们需求的物理尺寸是关键。  

海计划公众号
(0)
上一篇 2020/03/29 01:40
下一篇 2020/03/29 01:40

您可能感兴趣的内容

  • SSL证书对SEO网站优有什么影响?使用HTTPS的SEO优势菜鸟指南_ssl基础入门

    理解差异根据您是网站的用户还是开发自己的网站,良好的在线体验将涉及安全的第三方和可信加密。为了理解如何完成这项工作并更好地理解为什么百度会支持某些元素,了解HTTP和HTTPS之间究竟有什么区别以及它为何重要至关重要。HTTP超文本传输协议(HTTP)是一种用于通过Internet发送和接收信息的系统。HTTP被称为“应用层协议”,这意味着它专注于如何将信息

    2020/03/29
  • React Native 添加 Redux 支持菜鸟攻略_native入门教程

    0x1 前言之前写的项目都是人家编写好的脚手架,里面包含项目所需的环境文件,但由于有些东西用不到打包增加软件体积,所以自己从头搭建个环境。是基于 Native Base + react-navigation + Redux 的 React Native 脚手架,现在项目环境如下:{“name”: “app”,”version”: “0.0.1”,”priva

    2020/03/26
  • ES6箭头函数解析,跟普通函数的区别小白基础_箭头函数菜鸟教程网

    引言ES6中允许使用箭头=>来定义箭头函数,是ES6中较受欢迎也较常使用的新增特性。本文将从箭头函数的基本语法,与普通函数对比,箭头函数不适用场景三个方面进行梳理。基本语法// 箭头函数
    let func = (name) => {// 函数体return `Hello ${name}`;
    };// 等同于
    let func = function (name

    2020/03/22
  • js事件冒泡和默认事件处理(原生js、vue)菜鸟指南_事件教程视频

    一、默认事件何为默认事件?比如 a 会跳转页面,submit 会提交表单等。1. 普通js方法e.preventDefault()函数。百度
    function stopDef(e){e.preventDefault();
    }2. Vue.j

    2020/04/03
  • 为什么使用 document.write 需要将</script>拆分开?指南教程_script使用帮助

    细心点的朋友可能会注意到,有些网站使用document.write动态加载JS的时候需要把拆分开来写?如下面的例子所示:if (typeof window[‘jQuery’] == ‘undefined’) document.write(‘<scr'+'ipt type="tex

    2020/03/23
  • CSS层叠样式表攻略教程_样式小白基础

    简介层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号,拥有对网页对象和模型样式编辑能力,并能进行初步交互设计使用方式(就近原则)1 元素内嵌样式表Hello2 文档类型样式表(head里)a

    2020/03/31
  • 如何利用HTML5打造桌面应用,介绍基于Nodejs实现搭建跨平台桌面应用的框架入门基础_桌面基础指南

    通常我们会感觉网上有很多有趣的HTML应用,但这些应用非要你打开浏览器,输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用html5+javascirpt+Css开发的本地桌面应用就是要提高给用户这种体验,这篇文章将介绍开发HTML5本地桌面应用的框架:ElectronElectron是这样一个框架,它可以帮助您使用JavaScrip

    2020/04/06
  • js中的策略模式入门知识_模式小白知识

    什么是策略模式,官方定义是:定义一些列算法,把他们封装起来,并且可以相互替换。说人话(⊙ˍ⊙):就是把看似毫无联系的代码提取封装、复用,使之更容易被理解和拓展。常见的用于一次if判断、switch枚举、数据字典等流程判断语句中。使用策略模式计算等级在游戏中,我们每玩完一局游戏都有对用户进行等级评价,比如S级4倍经验,A级3倍经验,B级2倍经验,其他1倍经验,

    2020/03/20
  • canvas 环形图绘制攻略教程_canvas小白指南

    主要用到几个知识点1、lineCap:如何绘制每一条线段末端的属性。有3个可能的值,分别是:butt(线段末端以方形结束), round (线段末端圆形结束)and square(线段末端以方形结束,但是增加了一个宽度和线段相同,高度是线段厚度一半的矩形区域)。默认值是 butt。 2、圆弧起始点与结束点的设置在本里中设置方式 ctx.arc(110,

    2020/03/30
  • Codekit教程视频为Web前端打造的全能型神器

    Codekit基础入门 官方网址:https://codekitapp.com/ 简介描述:为Web前端打造的全能型神器 CodeKit简介 这是一款Mac平台集代码编辑与文件压缩…

    2020/03/05
  • 千万级用户网站门户前端设计小白教程_前端入门百科

    对于千万级的注册用户的门户项目是前端这块是怎么去实现的,自己在平常的工作中总结了一些经验,也是在不断的挫折中,不断演练的,希望总结出来给大家参考下,和大家一起探讨,一起进步。 一、门户设计一般会遇到哪些难点(一)、首页打开时间太慢了在开发一个门户到生产上线后,首页响应时间是检验门户整个系统架构以及开发的重要的一项指标,有时候我们发现在公司测试发现速度都挺快的

    2020/03/22
  • 迅捷PDF转换器基础知识_文档、音视频转换处理,文字、语音识别

    迅捷PDF转换器基础知识 官方网址:https://app.xunjiepdf.com/ 简介描述:文档、音视频转换处理,文字、语音识别 迅捷在线pdf转word转换器免费版为您提…

    2020/03/06
  • css-animation-101菜鸟教程_从零开始介绍 CSS 动画开源电子书

    css-animation-101菜鸟教程 官方网址:https://cssanimation.rocks GitHub:https://github.com/cssanimati…

    2020/03/06
  • 如何成为一名开源程序员入门指南_程序员使用教程

    科技世界的探索总是让我们兴奋不已。很多科技日新月异,你探索得越深远,你看到的世界就越广阔无穷,这就像是一只驼一只的海龟一样。因此,科技世界也像宇宙一样无穷无尽。如果你也渴望加入到推动技术世界发展的社区中,你应该如何开始呢?你要做的第一步是什么?以后应该怎么做?首先,你得明白开源指的是开放软件源代码的意思。这个很好理解,但是“开源”这个词最近一段时间经常出现在

    2020/04/03
  • 为什么滴滴裁员2000人,被裁员工却像中奖一样开心?使用帮助_裁员指南攻略

    2月15日,滴滴举办了阅读全员会,在滴滴的月度全员会上,滴滴CEO程维公开宣布公司将做好过冬准备。2019年对非主业进行“关停并转”,对业务重组带来的岗位重叠和绩效不达标的员工进行减员公司将进行优化减员,整体裁员比例占到全员的 15%,涉及 2000 人左右。 据《财经》报道,滴滴近日已给出裁员的具体赔偿方案:补偿一般为 N+1 个月,如果本周能确认,再额

    2020/03/31
  • 微信和支付宝中的一些常用方法封装入门基础知识_封装小白知识

    最近做了同一个样子的小程序的支付宝版本,现在如果想想是开发两次的话心里应该是很难受的。去年11月12月份左右开发了两个微信小程序是一个在超市买商品的,一个用户版本,一个商户版本的。我们团队看到了uniapp这个东西,然后用这个东西写了一点demo,然后就决定采纳这个东西开发微信小程序了。这个开发体验真的是让人揪心,因为编译起来太慢了,就是这边保存完代码,你如

    2020/03/24