我需要得到一个元素的高度,在一个div是隐藏的。现在我显示div,获得高度,并隐藏父div。这看起来有点傻。有没有更好的办法?
我使用jQuery 1.4.2:
$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();
我需要得到一个元素的高度,在一个div是隐藏的。现在我显示div,获得高度,并隐藏父div。这看起来有点傻。有没有更好的办法?
我使用jQuery 1.4.2:
$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();
当前回答
遵循Nick Craver的解决方案,设置元素的可见性可以让它获得准确的尺寸。我经常用这个方法。然而,不得不手动重置样式,我发现这很麻烦,考虑到修改元素的初始位置/显示在我的css通过开发,我经常忘记更新相关的javascript代码。下面的代码不会重置每个say的样式,而是删除javascript添加的内联样式:
$("#myDiv")
.css({
position: 'absolute',
visibility: 'hidden',
display: 'block'
});
optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();
$("#myDiv").attr('style', '');
这里唯一的假设是不能有其他内联样式,否则它们也会被删除。不过,这里的好处是元素的样式将返回到css样式表中的样式。因此,您可以将其写成一个函数,其中传递一个元素,并返回一个高度或宽度。
我发现通过js设置内联样式的另一个问题是,当通过css3处理过渡时,你被迫调整样式规则的权重,使其比内联样式更强,这有时会令人沮丧。
其他回答
你混淆了两种CSS样式,显示样式和可见样式。
如果元素通过设置可见性css样式隐藏,那么无论元素是否可见,您都应该能够获得高度,因为元素仍然占据页面上的空间。
如果通过将display css样式更改为“none”来隐藏元素,那么元素在页面上不占空间,您将不得不给它一个显示样式,这将导致元素在一些空间中呈现,在这一点上,您可以获得高度。
你可以这样做,虽然有点俗气,如果位置已经是绝对的,就忘记它:
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 : "");
遵循Nick Craver的解决方案,设置元素的可见性可以让它获得准确的尺寸。我经常用这个方法。然而,不得不手动重置样式,我发现这很麻烦,考虑到修改元素的初始位置/显示在我的css通过开发,我经常忘记更新相关的javascript代码。下面的代码不会重置每个say的样式,而是删除javascript添加的内联样式:
$("#myDiv")
.css({
position: 'absolute',
visibility: 'hidden',
display: 'block'
});
optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();
$("#myDiv").attr('style', '');
这里唯一的假设是不能有其他内联样式,否则它们也会被删除。不过,这里的好处是元素的样式将返回到css样式表中的样式。因此,您可以将其写成一个函数,其中传递一个元素,并返回一个高度或宽度。
我发现通过js设置内联样式的另一个问题是,当通过css3处理过渡时,你被迫调整样式规则的权重,使其比内联样式更强,这有时会令人沮丧。
我在获取隐藏元素宽度时遇到了同样的问题,所以我写了这个插件调用jQuery Actual来修复它。而不是使用
$('#some-element').height();
use
$('#some-element').actual('height');
会给你隐藏元素的正确值或者元素有一个隐藏的父元素。
完整的文件请见这里。页面中还包括一个演示。
希望这对你有所帮助:)
以尼克的回答为基础:
$("#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元素上的style属性,一切恢复正常,仍然是隐藏的,因为它最初是隐藏的。