Javascript 如何判断div是否受高度约束?
我想知道使用jquery时div是否受高度约束 例如,此div被限制为100px,无论内容大小如何,该div的高度都为100px:Javascript 如何判断div是否受高度约束?,javascript,jquery,Javascript,Jquery,我想知道使用jquery时div是否受高度约束 例如,此div被限制为100px,无论内容大小如何,该div的高度都为100px: <div style="height: 100px;"> bla bla </div> 布拉布拉 这一个不受约束,将采用其内容的高度: <div> bla bla </div> 布拉布拉 换句话说,我想知道是否通过设置style属性或使
<div style="height: 100px;">
bla bla
</div>
布拉布拉
这一个不受约束,将采用其内容的高度:
<div>
bla bla
</div>
布拉布拉
换句话说,我想知道是否通过设置style属性或使用单独的css样式来设置高度(如果是的话会怎样)。
谢谢
用于FF3.6 FF5 IE8铬12和操作11的解决方案:
function css(a){
var sheets = document.styleSheets;
var o={};
var name;
var i=0;
while (i<sheets.length) {
var rules = sheets[i].rules || sheets[i].cssRules;
var r=0;
while(r<rules.length) {
if(typeof(rules[r].style)!="undefined" &&
!rules[r].selectorText.match(":before") && // fix for FF3.6
!rules[r].selectorText.match(":after") &&
!rules[r].selectorText.match(":link") &&
!rules[r].selectorText.match(":hover") &&
!rules[r].selectorText.match(":active") &&
!rules[r].selectorText.match(":visited") &&
!rules[r].selectorText.match(":first-letter") &&
!rules[r].selectorText.match(":-moz-focus-inner") &&
a.is(rules[r].selectorText)) {
o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
}
r++;
}
i++;
}
return o;
}
function css2json(css){
var s = {};
if(!css) return s;
var isMSIE = /*@cc_on!@*/0;
if (isMSIE)
{
if(typeof(css)=="object")
{
for(var i in css) {
if(i.toLowerCase)
s[i.toLowerCase()] = css[i];
}
}
else if(typeof css == "string")
{
css = css.split("; ");
for (var i in css) {
var l = css[i].split(": ");
s[l[0].toLowerCase()] = (l[1]);
};
}
}
else
{
if(css instanceof CSSStyleDeclaration)
{
for(var i in css) {
if((css[i]).toLowerCase)
s[(css[i]).toLowerCase()] = (css[css[i]]);
}
}
else if(typeof css == "string")
{
css = css.split("; ");
for (var i in css) {
var l = css[i].split(": ");
s[l[0].toLowerCase()] = (l[1]);
};
}
}
return s;
}
...
alert(css($('some selector')).height);
函数css(a){
var sheets=document.styleSheets;
var o={};
变量名;
var i=0;
当(i使用中提供的函数时,您可以访问元素的高度,如下所示:
css($('div')).height
这些函数同时考虑了内联和继承的样式,我相信这正是您想要的。如果没有明确指定高度,则返回对象的height
属性将是undefined
据我所知,没有直接的方法知道是否在元素上设置了高度
然而,在四处寻找时,我发现了一个我认为会很好用的想法
它基本上涉及到克隆您想要了解的元素,向克隆添加一个高度设置为不太可能使用的值的类,然后针对该值进行测试
这里有一个我刚刚组合起来测试的方法:
function IsHeightSet(id)
{
var clone = $(id).clone();
clone.addClass('magicHeight');
return (clone.height() == 1069)? false : true;
}
以及magicHeight的CSS类:
.magicHeight
{
height: 1069px;
}
然后,我们可以使用它来测试给定元素是否具有指定的高度
下面是这段代码的一个工作示例:不确定问题出在哪里,但在我的浏览器(Firefox 3.6)中不起作用.I get:语法错误,无法识别的表达式:before@Ariel:我也是,伙计。before
在代码中没有提到,可能是jQuery的东西…@Pascal COURTOIS:所以它没有。它仍然会发现属性,但是从css()返回的对象
IE中的格式不正确。应该可以修复…@Town'before'是css选择器:before'。jQuery在FF 3.6上运行时有一个错误:before,:after和一些其他错误。你的答案很有趣,因为它告诉你一个div是否被约束,但它不告诉你它被约束了什么。但我记住了这个技巧。谢谢。我第一个答案是真的第一个是t,第二个是false。很有趣。什么浏览器?