JavaScript, неспособный к получению макс. высоты элемента через element.style.maxHeight [дубликат]
4 ответа
currentStyle for IE, getComputedStyle elsewhere.
document.defaultView.getComputedStyle(who,'').getPropertyValue('min-height');
Возможно, IE 9 будет поддерживать getComputedStyle.
Вместо этого вам нужно использовать currentStyle ...
alert(item.currentStyle.minHeight);
Свойство style относится к тому, что было устанавливается Javascript, в отличие от унаследованного CSS. Такие библиотеки, как jQuery , решают эту проблему изнутри (среди прочих бесчисленных неприятностей).
Свойство element.style позволяет узнать только те свойства CSS, которые были определены как inline в этом элементе. , вы должны получить вычисленный стиль , это не так просто сделать кроссбраузерным способом, как говорили другие, IE имеет свой собственный путь, через свойство element.currentStyle стандартным способом DOM уровня 2 , реализованным другими браузерами, является метод document.defaultView.getComputedStyle .
Однако есть различия между способом IE и стандартным способом, например, свойство IE element.currentStyle предполагает, что вы получаете доступ к именам свойств CCS, состоящим из двух или более слов в camelCase (например, maxHeight , fontSize , backgroundColor и т. Д.), Стандартный способ ожидает свойства со словами, разделенными тире (например, max -высота , размер шрифта , цвет фона и т. д.).
Кроме того, 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 они вернут их в том виде, в каком они были определены.
Посмотрите этот пример .
Я очень рекомендую jQuery.
Просто добавьте jQuery на вашу страницу, и вы сможете получать и устанавливать атрибуты CSS динамически и кроссбраузерно (это избавляет от множества головных болей). Вот синтаксис:
/* this outer '$(function() { innerContent });'
is jQuery's 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');
});
Не забудьте про # перед id элемента (так jQuery узнает, что вам нужен элемент с таким id)
Есть способы избежать лишних вызовов функций, которые я привел выше, и добиться того же самого. jQuery.com сделает вас кроссбраузерным профессионалом в кратчайшие сроки!