当前位置: 首页 > 编程笔记 >

使用香草JavaScript获取div高度

唐增
2023-03-14
本文向大家介绍使用香草JavaScript获取div高度,包括了使用香草JavaScript获取div高度的使用技巧和注意事项,需要的朋友参考一下

您可以使用2个属性clientHeight和offsetHeight来获取div的高度。

clientHeight包括div的填充。

offsetHeight包括padding,scrollBar和div的边框。

示例

例如,如果您具有以下HTML-

<div id="myDiv" height="400px"></div>

您可以使用-获得高度

const height = document.querySelector('#myDiv').offsetHeight
console.log(height)

输出结果

这将给出输出-

400
 类似资料:
  • 问题内容: 如何在 不 使用jQuery之类的库的 情况下 以跨浏览器兼容的方式找到的当前宽度? 问题答案: document.getElementById(“mydiv”).offsetWidth element.offsetWidth(MDC)

  • 问题内容: 关于如何在不使用jQuery的情况下获得div高度的任何想法? 我正在搜索Stack Overflow这个问题,似乎每个答案都指向jQuery的。 我尝试了类似的方法,但是即使我的div具有CSS 并在CSS中进行了设置,它也没有返回任何内容。 问题答案: 要么 包括填充。 包括填充,scrollBar和边框。

  • 我有一个简单的问题,困扰了我几天:什么是香草?有些人把它称为一个框架,你可以从官方页面下载一个库。 但当我检查一些示例或TodoMVC时,它们只是使用经典的raw JavaScript函数,甚至没有包括来自官方页面的库或任何东西。此外,官方网页上的链接“docs”指向JavaScript的Mozilla规范。 我的问题是:VanillaJS是raw JavaScript吗?如果是的话,为什么人们把

  • 我使用spring boot 1.5.6版本和thymeleaf 3.0.0。 我有一个控制器,很简单: start应用程序如下: 当我运行该应用程序时,我将http://localhost:8080放在chrome地址栏中。我得到的是你好世界。所以我想spring boot&thymeleaf模板解析器可以找到index.html文件。但是根本不解析和。我通过chrome开发工具检查了页面的源代

  • 问题内容: 有些文档我无法获取文档的高度(将某些内容绝对定位在最底部)。另外,在这些页面上的底部填充似乎没有任何作用,但在高度会返回的页面上却没有作用。案例: 在Fandango上, jQuery的返回正确值 返回0 返回0 关于平装交换: jQuery的TypeError:为null 返回错误的值 返回错误的值 注意:如果有一些窍门,我具有浏览器级别的权限。 问题答案: 文档大小是浏览器兼容性的

  • 本文向大家介绍写一个方法获取div的宽高相关面试题,主要包含被问及写一个方法获取div的宽高时的应答技巧和注意事项,需要的朋友参考一下