养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

HTML 如何获取父级div高度

时间:2024-10-02 22:28:31

在WEB前端开发中,我们经常会遇到这样的需求,获取父级元素的某些参数,比如说高度,冷觋溪诠宽度,坐标等等,在HTML开发中,我们可以墩伛荨矧通过JS实现这样的效果,下面给大家简单的介绍几种方法用于获取父级元素的高度。

工具/原料

代码编辑器(本文使用的Sublime)

带F12开发者工具的浏览器

方法/步骤

1、首先我们创建一个两层DIV的嵌套做演示,代码如图。

HTML 如何获取父级div高度

2、使用浏览器访问,效果如图。

HTML 如何获取父级div高度

3、如果我们能直接拿到父元素的选择器参数,比如ID,可以通过JS直接获取它的相关高度,代码如图。

HTML 如何获取父级div高度

4、使用浏览器F12工具查看一下,成功获取到了对应元素的高度值。

HTML 如何获取父级div高度

5、接下来我们试一下JQuery的版本,代码如图。

HTML 如何获取父级div高度

6、使用浏览器F12工具查看一下,JQuery成功获取到了对应元素的高度值。

HTML 如何获取父级div高度

7、如果我们获取不到父元素的选择器参数,可以通过子元素查找对应的父元素结点,JS版本的代码如图。

HTML 如何获取父级div高度

8、使用浏览器F12工具查看一下,使用KS通过元素同样成功获取到了对应父元素DIV的高度值,如图。

HTML 如何获取父级div高度

9、我们试一下JQuery版本的子元素获取父节点DIV的高度,代码如图。

HTML 如何获取父级div高度

10、同样可以获取到父元素DIV的高度值。

HTML 如何获取父级div高度

© 一点知识