Javascript не способен получить элемент max-height через element.style.maxHeight

Ответ 1

Свойство element.style позволяет вам знать только свойства CSS, которые были определены как встроенные в этот элемент, вы должны получить вычисленный стиль, не так просто сделать это кросс-браузерным способом, как говорили другие, IE имеет свой собственный путь, через свойство element.currentStyle, стандартный способ DOM Level 2, реализованный другими браузерами, - это document.defaultView.getComputedStyle.

Однако существуют различия между способом IE и стандартным способом, например, свойство IE element.currentStyle ожидает, что вы получите доступ к CCS имена свойств, состоящие из двух или более слов в camelCase (например, maxHeight, fontSize, backgroundColor и т.д.), стандартный способ предполагает свойства со словами, разделенными тире (например, max-height, font-size, background-color и т.д.).

Кроме того, IE element.currentStyle вернет все размеры в указанном им устройстве (например, 12pt, 50%, 5em), стандартный способ рассчитает фактический размер в пикселях.

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

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

Вышеупомянутая функция не идеальна для некоторых случаев, например для цветов, стандартный метод возвращает цвета в записи rgb (...), в IE они возвратят их, как они были определены.

Отметьте этот пример.

Ответ 2

currentStyle for IE, getComputedStyle elsewhere.
document.defaultView.getComputedStyle(who,'').getPropertyValue('min-height');

Можете также изучить его, IE 9 будет поддерживать getComputedStyle.

Ответ 3

Я очень рекомендую jQuery.

Просто добавьте jQuery на свою страницу, затем вы можете получить и установить атрибуты CSS динамически и в поперечном браузере (это устраняет много головных болей). Вот синтаксис:

/*  this outer '$(function() { innerContent });'
    is jQuery helpful function that executes when all
    the elements in your HTML document are ready to
    be accessed (if you executed code without this,
    when you try to find the element you want to find,
    it might not have been created yet, and so your code
    will have no effect on that element)  */
$(function() {

    //  get CSS data
    var currentMinHeight = $('#idOfElement').css('min-height');
    var currentMaxHeight = $('#idOfElement').css('max-height');

    //  set CSS data
    $('#idOfElement').css('min-height', '999px');
    $('#idOfElement').css('max-height', '999px');

});

Обязательно не забывайте # перед идентификатором элемента (так как jQuery знает, что вы хотите, чтобы этот элемент имел этот идентификатор)

Есть способы избежать избыточных вызовов функций, которые я сделал выше, и выполнить одно и то же. jQuery.com заставит вас прокатиться как кросс-браузер pro в кратчайшие сроки!

Ответ 4

Вместо этого вам нужно использовать currentStyle...

alert(item.currentStyle.minHeight);

Свойство style относится к тому, что было установлено Javascript, в отличие от унаследованного CSS. Библиотеки, такие как jQuery, ссылаются на это внутренне (среди других бесчисленных досаждений).