js获取网页标题 - jQuery:获取jQuery中隐藏元 素的高度



js获取元素内容 (10)

Nick进一步回答:

$("#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元素上的样式属性,一切都恢复正常并且仍然​​隐藏起来,因为它首先被隐藏起来。

https://src-bin.com

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

我正在使用jQuery 1.4.2:

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

Answer #1

一种解决方法是在要获取高度的元素外创建父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>


Answer #2

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

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 : "");

Answer #3

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

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的改进方法,但是在样式属性中应该有某些东西需要放回来的情况下使用这两种方法,并且寻找一个父元素。

我唯一对我的解决方案抱怨的是,通过父母的循环不是完全有效的。


Answer #4

您也可以将隐藏的div放在屏幕上,并使用负边距,而不是使用display:none,这很像文本缩进图像替换技术。

例如。

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

这样高度()仍然可用。


Answer #5

您正在混淆两种CSS样式, 显示样式可见性样式

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

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


Answer #6

我试图找到隐藏元素的工作函数,但是我意识到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 : http://jsbin.com/ETiGIre/7


Answer #7

我遇到了隐藏元素宽度的相同问题,所以我编写了这个插件调用jQuery Actual来修复它。 而不是使用

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

使用

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

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

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

希望这个帮助:)


Answer #8

继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处理转换时,您会被迫将样式规则的权重调整为比内联样式强,这有时会令人沮丧。


Answer #9

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

它可以在这里找到: http://jsbin.com/ikogez/3/ : 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 :
 * http://.com/a/8839261/1146033
 *
 * @author Robin van Baalen <[email protected]>
 * @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;
};




css