HTML 如何获取父级div高度

 时间:2024-10-03 00:23:28

在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高度

jquery如何实现鼠标放上div时改变其大小 jquery获取对象属性值的方法? 如何使用Visual Studio 2015进行新建一个空项目 在VScode中如何设置水平滚动条自动可见 php+mysql怎样一次插入多条记录到数据库
热门搜索
触手少女 中华烟价格表和图片细 铁树开花图片 伤感文字图片 肛瘘图片