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。
Soul-Master/visible.event.html
演示： 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();
//找到身高
