iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >javascript如何获取隐藏元素的高度
  • 101
分享到

javascript如何获取隐藏元素的高度

2024-04-02 19:04:59 101人浏览 泡泡鱼
摘要

这篇文章将为大家详细讲解有关javascript如何获取隐藏元素的高度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 获取方法:1、引入Jqu

这篇文章将为大家详细讲解有关javascript如何获取隐藏元素的高度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

获取方法:1、引入Jquery文件;2、使用“$("#id值")”语句根据指定id值获取隐藏元素对象;3、使用“元素对象.height()”语句来获取隐藏元素的高度。

教程操作环境:windows7系统、javascript1.8.5&&jquery3.1.0版、Dell G3电脑。

首先,正常情况下,确保div是有高度的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="div">
        <div id="divsub">
            子div内容,需要获取我的高度
        </div>
    </div>
</body>
<script type="text/javascript">
    console.log($("#div").height())  //21
    console.log($("#divsub").height()) //21
</script>
</html>

javascript如何获取隐藏元素的高度

当我们在id为div的元素上加了  style="display:none;" 之后,重新运行代码,结果如下:

javascript如何获取隐藏元素的高度

可以看到,父div能正常获取值,而子div已经获取不到高度了。

当我们把 style="display:none;" 改成 style="visibility: hidden;" 后,仍能够正常获取。但是div的位置还在。

javascript如何获取隐藏元素的高度

javascript如何获取隐藏元素的高度

于是,就有了下面的解决方案,使用visibility隐藏,然后把div移到屏幕之外看不见的地方就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="div" style="visibility:hidden; position: absolute;top:-9999px;left:-9999px;">
        <div id="divsub">
            子div内容,需要获取我的高度
        </div>
    </div>
</body>
<script type="text/javascript">
    console.log($("#div").height())  
    console.log($("#divsub").height())
</script>
</html>

关于“javascript如何获取隐藏元素的高度”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: javascript如何获取隐藏元素的高度

本文链接: https://www.lsjlt.com/news/81503.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • javascript如何获取隐藏元素的高度
    这篇文章将为大家详细讲解有关javascript如何获取隐藏元素的高度,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 获取方法:1、引入jqu...
    99+
    2024-04-02
  • js如何解决无法获取隐藏元素宽度和高度的问题
    这篇文章给大家分享的是有关js如何解决无法获取隐藏元素宽度和高度的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在实际开发中会遇到确实需要获取隐藏元素的宽高,这儿所说的隐藏元...
    99+
    2024-04-02
  • JavaScript如何隐藏元素
    这篇文章将为大家详细讲解有关JavaScript如何隐藏元素,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 方法:1、“元素对象.style....
    99+
    2024-04-02
  • jQuery如何获取元素高度?
    这篇文章将为大家详细讲解有关jQuery如何获取元素高度?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如何使用 jQuery 获取元素高度 简介 jQuery 是一个简洁且强大的 JavaScript ...
    99+
    2024-04-02
  • javascript如何隐藏元素值
    这篇文章主要讲解了“javascript如何隐藏元素值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何隐藏元素值”吧! ...
    99+
    2024-04-02
  • javascript如何隐藏html元素
    这篇文章主要介绍“javascript如何隐藏html元素”,在日常操作中,相信很多人在javascript如何隐藏html元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • jQuery如何获取元素内高度?
    这篇文章将为大家详细讲解有关jQuery如何获取元素内高度?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。jQuery 获取元素内高度 简介 jQuery 提供多种方法来获取元素的内高度,即从元素顶部边缘...
    99+
    2024-04-02
  • jQuery如何获取元素外高度?
    这篇文章将为大家详细讲解有关jQuery如何获取元素外高度?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 jQuery 获取元素外高度 jQuery 提供了一个简单的方法来获取元素的外高度,包括其填充...
    99+
    2024-04-02
  • javascript如何隐藏元素边框
    这篇文章主要讲解了“javascript如何隐藏元素边框”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript如何隐藏元素边框”吧! ...
    99+
    2024-04-02
  • javascript如何用鼠标隐藏元素
    这篇文章主要介绍了javascript如何用鼠标隐藏元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇javascript如何用鼠标隐藏元素文章都会有所收获,下面我们一起来看看...
    99+
    2024-04-02
  • javascript隐藏元素的方法
    这篇文章主要介绍“javascript隐藏元素的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript隐藏元素的方法”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • jquery如何获元素的高度
    在jquery中获元素高度的方法:1.新建html项目,引入jquery;2.创建测试标签,并设置宽高;3.使用height()方法获取元素高度;具体步骤如下:首先,在新建一个html项目,在项目中引入jquery;<script t...
    99+
    2024-04-02
  • vue如何获取元素的高
    在vue中获取元素高的方法:1.新建vue.js项目;2.添加div标签,设置ref属性;3.执行代码获取元素的高;具体步骤如下:首先,在vue-cli中创建一个vue.js项目;vue create project-namevue.js项...
    99+
    2024-04-02
  • css如何隐藏元素
    这篇文章将为大家详细讲解有关css如何隐藏元素,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 方式:1、设置“display:none”语句;...
    99+
    2024-04-02
  • JavaScript如何获取DOM元素
    小编给大家分享一下JavaScript如何获取DOM元素,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!方法:1、用getElementById方法通过ID获取;2...
    99+
    2023-06-14
  • jquery如何隐藏元素
    这篇文章主要介绍了jquery如何隐藏元素,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 jquery隐藏元素的...
    99+
    2024-04-02
  • vue如何隐藏元素
    这篇文章给大家分享的是有关vue如何隐藏元素的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。vue隐藏元素的方法:1、使用“v-if”指令,通过动态的向DOM树内添加或者删除DOM元素的方式来显示或隐藏元素;2、使...
    99+
    2023-06-25
  • jQuery如何隐藏元素?
    ...
    99+
    2024-04-02
  • jQuery如何获取元素宽度?
    这篇文章将为大家详细讲解有关jQuery如何获取元素宽度?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。获取元素宽度 using jQuery jQuery提供了多种方法来获取元素的宽度,每种方法都有其特...
    99+
    2024-04-02
  • html中如何隐藏元素
    HTML是一种用于构建网页的标记语言,它可以帮助我们将文本、图片、音频、视频等多种媒体元素组合在一起,以创建漂亮、交互性强的网页。在Web开发中,我们经常需要使用一些技巧来隐藏一些元素,比如隐藏一些敏感信息、防止页面被恶意抓取等等。那么在H...
    99+
    2023-05-14
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作