Question

我想知道如果div是高度约束的话还是使用jquery。

例如，这个div被限制为100px，无论div的内容大小是100px高度：

    <div style="height: 100px;">
         bla bla
    </div>

并且这个没有约束，并且将取其内容的高度：

    <div>
          bla bla
    </div>

换句话说，我想通过设置样式属性或单独的css样式来知道是否设置了高度（如果是这样）。感谢

FF3.6 FF5 IE8 Chrome12和Opera11的解决方案：

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

Answer 1

使用this answer中提供的功能，您可以像这样访问元素的高度：

css($('div')).height

这些函数既考虑了内联样式又考虑了继承样式，我相信这就是你想要的。如果未明确指定高度，则返回对象的height属性将为 undefined 。

Demo

Answer 2

据我所知，没有直接的方法可以知道是否在元素上设置了高度。

然而，在我周围搜索时，我发现了一个我认为会运作良好的想法。

它基本上涉及克隆你想知道的元素，向克隆中添加一个类，其高度设置为一个不太可能被使用的值，然后对其进行测试。

这是我刚才用来测试这个的方法：

function IsHeightSet(id)
{
    var clone = $(id).clone();
    clone.addClass('magicHeight');

    return (clone.height() == 1069)? false : true;
}

和magicHeight的CSS类：

.magicHeight
{
    height: 1069px;
}

然后我们可以使用它来测试给定元素是否指定了高度。

以下是此代码的一个有效示例：http://jsfiddle.net/mnpey/1/

如何判断div是否受到高度限制？

2 个答案: