css 获取元素高度,如何获取没有给出高度的元素的高度？

前言

最近在工作中遇到了一个问题，某个需求需要获取元素的高度，就假定是div元素，但是呢因为div中元素的内容是不确定的，所以并没有给div设置高度，在获取高度时，我们首先会想到3中方法

1、div.style.height;

我们会发现输出空，这是因为style对象获取的是定义在内联样式中的属性，所以不可行。

2、$(div).css("height");

我们会发现输出0，很正常因为我们根本没定义height

3、window.getComputedStyle(div)

图中仅截取部分属性

仍然输出0，getComputedStyle()会获取到最终应用在元素上的所有CSS属性对象(即使没有CSS代码，也会把默认的祖宗八代都显示出来),这样看来，因为我们没有定义height，为0也很正常

解决办法

我们可以使用jquery中的height()方法

$(div).height()

轻松解决，但是有个问题需要注意，使用这种方法获取到的高度是元素在页面中的实际高度，包括单位，因为存在一种情况就是，我们在css中给出的是px，但是在代码中我们通过某种方式将页面中所有的px转化为rem，所以我们使用height()获取到的高度值单位为rem，这种转换经常在移动端开发中应用

当然$(height).innerHeight()和$(height).outterHeight()都可以获取到，他们之间的区别如下图

原文：https://www.cnblogs.com/kunmomo/p/10473435.html

css 获取元素高度,如何获取没有给出高度的元素的高度？相关推荐

获取html元素的高,获取HTML元素的高度jQuery
我为我的应用程序创建了一个漂亮的小模式消息窗口,但我似乎无法找到注入叠加层的容器的高度.获取HTML元素的高度jQuery function load_shipping_message (title, ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
WebMagic功能——XPath、CSS选择器、正则表达式 || 抽取元素API、获取结果API || 获取链接||使用Pipeline保存结果
WebMagic功能实现PageProcessor 抽取元素Selectable WebMagic里主要使用了三种抽取技术:XPath.正则表达式和CSS选择器.另外,对于JSON格式的内容,可使用 ...
css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别
Css隐藏元素(display,visibility)的区别 display display属性值 display 属性规定元素应该生成的框的类型. 属性值: block: /表现为一个块级元素(一般 ...
html js div 内容高度,JavaScript获取div高度并实现高度监听
demo #demo { width: 100px; height: 200px; background: yellow; margin: 10px; padding: 10px; border: 2 ...
php 获取子孙,jquery如何查找后代元素？jquery获取后代元素方法
在上一篇我们讲到jquery获取父元素?相信你已经学会了,那么下面我们来讲一下jquery如何查找后代元素?jquery获取后代元素方法. 一: 查找后代元素三种方法 (1)children(): ( ...
html 软键盘页面高度,深入理解高度，获取屏幕、webview、软键盘高度
如果没有手动调整过webview的高度的话,默认情况下,屏幕的高度=顶部状态栏的高度+webview的高度. 如果软键盘打开,则屏幕的高度=顶部状态栏的高度+webview的高度+软键盘的高度. HT ...
html滚动字幕高度,jquery取div scrollHeight(滚动文字的实际高度)scrollHeight获取
jquery取div scrollHeight(滚动文字的实际高度)scrollHeight获取文字层实际高度 scrollHeight获取文字层实际高度 $(document).ready(func ...
深入理解高度。获取屏幕、webview、软键盘高度
转载地址:http://ask.dcloud.net.cn/article/205 如果没有手动调整过webview的高度的话,默认情况下,屏幕的高度=顶部状态栏的高度+webview的高度. 如果软 ...
浏览器滚动条高度的获取
浏览器滚动条高度的获取开始最近做业务需求时,需要监听滚动条scoll事件,获取滚动条高度,用的document.body.scrollTop发现得到的值一直是0,后来做了一些查询,挖出不少秘密,做 ...

css 获取元素高度,如何获取没有给出高度的元素的高度？

css 获取元素高度,如何获取没有给出高度的元素的高度？相关推荐

最新文章

热门文章