jQuery:获取jQuery隐藏元素的高度

我需要得到隐藏在div内的元素的高度。 现在我显示div,获取高度,并隐藏父div。 这似乎有点傻。 有没有更好的办法?

我正在使用jQuery 1.4.2:

$select.show(); optionHeight = $firstOption.height(); //we can only get height if its visible $select.hide(); 

你可以做一些这样的事情,虽然有一点哈克,但如果已经是绝对的话,

 var previousCss = $("#myDiv").attr("style"); $("#myDiv") .css({ position: 'absolute', // Optional if #myDiv is already absolute visibility: 'hidden', display: 'block' }); optionHeight = $("#myDiv").height(); $("#myDiv").attr("style", previousCss ? previousCss : ""); 

我碰到了隐藏的元素宽度相同的问题,所以我写这个插件调用jQuery实际来解决它。 而不是使用

 $('#some-element').height(); 

使用

 $('#some-element').actual('height'); 

会给你正确的值隐藏元素或元素有一个隐藏的父母。

完整的文档请看这里 。 在页面中也有一个演示包含。

希望这个帮助:)

你在混淆两种CSS样式, 显示样式和可见性样式 。

如果通过设置可见性CSS样式来隐藏元素,那么无论元素是否可见,您都应该能够获取高度,因为元素在页面上仍占用空间

如果通过将显示CSS样式更改为“无”来隐藏该元素,则该元素不占用页面上的空间,并且必须给它一个显示样式,这将导致该元素在某个空间,哪一点,你可以得到的高度。

实际上,我有时会采取一些诡计来处理这个问题。 我开发了一个jQuery滚动窗口小部件,在那里我遇到了一个问题,我不知道如果可滚动内容是一个隐藏的标记的一部分,或者不提前。 以下是我所做的:

 // try to grab the height of the elem if (this.element.height() > 0) { var scroller_height = this.element.height(); var scroller_width = this.element.width(); // if height is zero, then we're dealing with a hidden element } else { var copied_elem = this.element.clone() .attr("id", false) .css({visibility:"hidden", display:"block", position:"absolute"}); $("body").append(copied_elem); var scroller_height = copied_elem.height(); var scroller_width = copied_elem.width(); copied_elem.remove(); } 

这在很大程度上是有效的,但是有一个明显的问题可能会出现。 如果您正在克隆的内容使用包含对规则中父级标记的引用的CSS进行样式化,则克隆的内容将不包含适当的样式,并且可能具有稍微不同的度量。 为了解决这个问题,你可以确保你正在克隆的标记有CSS规则,不包括对父标记的引用。

此外,这不是我的滚动小部件,但为了得到克隆的元素适当的高度,你需要设置宽度为父元素相同的宽度。 在我的情况下,一个CSS的宽度总是应用到实际的元素,所以我不必担心这个,但是,如果元素没有适用于它的宽度,你可能需要做某种递归遍历元素的DOM血统来找到合适的父元素的宽度。

尼克回答:

 $("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'}); optionHeight = $("#myDiv").height(); $("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'}); 

我发现最好这样做:

 $("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'}); optionHeight = $("#myDiv").height(); $("#myDiv").removeAttr('style'); 

设置CSS属性会将它们插入到内部,这将覆盖你在CSS文件中的任何其他属性。 通过删除HTML元素上的样式属性,一切都恢复正常并且仍然​​隐藏,因为它隐藏在第一位。

进一步构建用户Nick的答案和在JSBin上的用户hitautodestruct的插件,我创建了一个类似的jQuery插件,它检索宽度和高度,并返回一个包含这些值的对象。

它可以在这里找到: http : //jsbin.com/ikogez/3/

更新

我已经完全重新设计了这个小小的插件,原来的版本(上面提到的)在真正的生活环境中并不是真的可用,在这个环境中发生了大量的DOM操作。

这是完美的工作:

 /** * getSize plugin * This plugin can be used to get the width and height from hidden elements in the DOM. * It can be used on a jQuery element and will retun an object containing the width * and height of that element. * * Discussed at StackOverflow: * http://stackoverflow.com/a/8839261/1146033 * * @author Robin van Baalen <robin@neverwoods.com> * @version 1.1 * * CHANGELOG * 1.0 - Initial release * 1.1 - Completely revamped internal logic to be compatible with javascript-intense environments * * @return {object} The returned object is a native javascript object * (not jQuery, and therefore not chainable!!) that * contains the width and height of the given element. */ $.fn.getSize = function() { var $wrap = $("<div />").appendTo($("body")); $wrap.css({ "position": "absolute !important", "visibility": "hidden !important", "display": "block !important" }); $clone = $(this).clone().appendTo($wrap); sizes = { "width": $clone.width(), "height": $clone.height() }; $wrap.remove(); return sizes; }; 

你也可以将隐藏的div放在屏幕上,而不是使用display:none,这与文本缩进图像替换技术非常相似。

例如。

 position:absolute; left: -2000px; top: 0; 

这样高度()仍然可用。

按照Nick Craver的解决方案,设置元素的可见性使其可以获得准确的尺寸。 我经常使用这个解决方案。 但是,不得不手动重置样式,我发现这个麻烦,考虑到修改元素的初始定位/显示在我的CSS通过发展,我经常忘记更新相关的JavaScript代码。 以下代码不会重置每个说法的样式,但会删除由javascript添加的内联样式:

 $("#myDiv") .css({ position: 'absolute', visibility: 'hidden', display: 'block' }); optionHeight = $("#myDiv").height(); optionWidth = $("#myDiv").width(); $("#myDiv").attr('style', ''); 

这里唯一的假设是不能有其他的内联样式,否则它们将被删除。 但是,这里的好处是元素的样式会返回到它们在CSS样式表中的样式。 因此,你可以把它写成一个元素被传递的函数,并返回一个高度或者宽度。

我发现通过js内联样式设置样式的另一个问题是,当通过css3处理样式转换时,您会被迫将样式规则的权重调整为比内联样式强,这有时会令人沮丧。

我试图找到隐藏元素的工作功能,但是我意识到CSS比每个人都想象的要复杂得多。 在CSS3中有很多新的布局技术,可能不适用于所有以前的答案,如灵活的框,网格,列,甚至复杂的父元素内的元素。

flexibox例子 在这里输入图像描述

我认为唯一可持续和简单的解决方案是实时渲染 。 那时,浏览器应该给你正确的元素大小

不幸的是,当元素被显示或隐藏时,JavaScript不提供任何直接事件来通知。 但是,我创建了一些基于DOM Attribute Modified API的函数,当元素的可见性发生变化时,它将执行回调函数。

 $('[selector]').onVisibleChanged(function(e, isVisible) { var realWidth = $('[selector]').width(); var realHeight = $('[selector]').height(); // render or adjust something }); 

有关更多信息,请访问我的项目GitHub。

https://github.com/Soul-Master/visible.event.js

演示: http : //jsbin.com/ETiGIre/7

根据定义,元素只有在高度可见的情况下才具有高度。

只是好奇:为什么你需要一个隐藏的元素的高度?

另一种方法是通过放置一个元素(使用z-index)来隐藏元素。

在我的情况下,我也有一个隐藏的元素阻止我获得高度的价值,但它不是元素本身,而是它的父母之一…所以我只是检查一下我的插件,看看它是隐藏,否则找到最接近的隐藏元素。 这是一个例子:

 var $content = $('.content'), contentHeight = $content.height(), contentWidth = $content.width(), $closestHidden, styleAttrValue, limit = 20; //failsafe if (!contentHeight) { $closestHidden = $content; //if the main element itself isn't hidden then roll through the parents if ($closestHidden.css('display') !== 'none') { while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) { $closestHidden = $closestHidden.parent().closest(':hidden'); limit--; } } styleAttrValue = $closestHidden.attr('style'); $closestHidden.css({ position: 'absolute', visibility: 'hidden', display: 'block' }); contentHeight = $content.height(); contentWidth = $content.width(); if (styleAttrValue) { $closestHidden.attr('style',styleAttrValue); } else { $closestHidden.removeAttr('style'); } } 

事实上,这是Nick,Gregory和Eyelidlessness的反应的结合,可以让你使用Gregory的改进方法,但是如果在样式属性中有某些东西需要放回来,一个父元素。

我唯一的解决办法是,通过父母的循环不是完全有效的。

一种解决方法是在要获取高度的元素外部创建父div,应用高度“0”并隐藏任何溢出。 接下来,获取子元素的高度,并删除父项的溢出属性。

 var height = $("#child").height(); // Do something here $("#parent").append(height).removeClass("overflow-y-hidden"); 
 .overflow-y-hidden { height: 0px; overflow-y: hidden; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent" class="overflow-y-hidden"> <div id="child"> This is some content I would like to get the height of! </div> </div> 

这是我写的一个脚本,用于处理隐藏元素的所有jQuery维度方法,甚至隐藏父母的后代。 请注意,使用此功能当然会有性能提升。

 // Correctly calculate dimensions of hidden elements (function($) { var originals = {}, keys = [ 'width', 'height', 'innerWidth', 'innerHeight', 'outerWidth', 'outerHeight', 'offset', 'scrollTop', 'scrollLeft' ], isVisible = function(el) { el = $(el); el.data('hidden', []); var visible = true, parents = el.parents(), hiddenData = el.data('hidden'); if(!el.is(':visible')) { visible = false; hiddenData[hiddenData.length] = el; } parents.each(function(i, parent) { parent = $(parent); if(!parent.is(':visible')) { visible = false; hiddenData[hiddenData.length] = parent; } }); return visible; }; $.each(keys, function(i, dimension) { originals[dimension] = $.fn[dimension]; $.fn[dimension] = function(size) { var el = $(this[0]); if( ( size !== undefined && !( (dimension == 'outerHeight' || dimension == 'outerWidth') && (size === true || size === false) ) ) || isVisible(el) ) { return originals[dimension].call(this, size); } var hiddenData = el.data('hidden'), topHidden = hiddenData[hiddenData.length - 1], topHiddenClone = topHidden.clone(true), topHiddenDescendants = topHidden.find('*').andSelf(), topHiddenCloneDescendants = topHiddenClone.find('*').andSelf(), elIndex = topHiddenDescendants.index(el[0]), clone = topHiddenCloneDescendants[elIndex], ret; $.each(hiddenData, function(i, hidden) { var index = topHiddenDescendants.index(hidden); $(topHiddenCloneDescendants[index]).show(); }); topHidden.before(topHiddenClone); if(dimension == 'outerHeight' || dimension == 'outerWidth') { ret = $(clone)[dimension](size ? true : false); } else { ret = $(clone)[dimension](); } topHiddenClone.remove(); return ret; }; }); })(jQuery); 

如果你已经在页面上显示了这个元素,那么你可以直接从DOM元素(通过.get(0)在jQuery中访问)直接获取高度,因为即使元素被隐藏,它也被设置:

 $('.hidden-element').get(0).height; 

宽度相同:

 $('.hidden-element').get(0).width; 

(感谢Skeets O'Reilly纠正)

 $('#idOfElement').height(); 

//找到身高