Как определить, является ли div ограничено по высоте?

Я хотел бы знать использование jquery, если div имеет ограничение по высоте или нет.

Например, этот 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 = /*@[email protected]*/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);

Ответ 1

Используя функции, приведенные в этом ответе, вы можете получить доступ к высоте элемента следующим образом:

css($('div')).height

Эти функции учитывают как встроенные, так и унаследованные стили, которые, я считаю, являются тем, что вы хотите. Если высота не была явно указана, свойство height возвращаемого объекта будет undefined.

Демо

Ответ 2

Насколько я могу судить, нет прямого способа узнать, была ли высота установлена на элементе или нет.

Однако, поиск вокруг меня натолкнулся на мысль, что, как я думаю, будет работать хорошо.

В основном это включает клонирование элемента, о котором вы хотите узнать, добавление класса клону, который имеет высоту, установленную на значение, которое вряд ли когда-либо будет использоваться, а затем тестирование на это.

Здесь метод, который я только что собрал, чтобы проверить это:

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

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

и класс CSS для magicHeight:

.magicHeight
{
    height: 1069px;
}

Затем мы можем использовать это, чтобы проверить, задан ли данный элемент указанной высотой.

Вот рабочий пример этого кода: http://jsfiddle.net/mnpey/1/