Всегда есть много проблем совместимости, чтобы получить стили расчета HTML -элементов, и между браузерами существуют некоторые различия. Firefox и Webkit (Chrome, Safari) поддерживают стандартный метод W3C: getComputEdstyle (), в то время как IE6/7/8 не поддерживает стандартный метод, но имеет личные атрибуты для его реализации: CurrentStyle, IE9 и Opera поддержка оба. С этими двумя методами и атрибутами большинство требований могут быть в основном выполнены.
Кода -копия выглядит следующим образом:
var getStyle = function (elem, type) {
вернуть 'getComputedStyle' в окне? getComputedStyle (elem, null) [type]: elem.currentStyle [type];
};
Тем не менее, использование CuryStyle для адаптивной ширины и высоты не может получить рассчитанное значение, поэтому он может вернуть только Auto, а GetComputEdStyle () может вернуть рассчитанное значение. Есть несколько способов решить эту проблему. Я думал ранее, чтобы вычесть значение прокладки, используя клиентскую Whidth/ClientHeight, чтобы рассчитанная ширина и высота можно было получить в браузерах, которые не поддерживают стандартный метод. Несколько дней назад я увидел, что Situ Zhengmei принимает другой метод, используя метод GetBoundingClientRect (), чтобы получить положение элемента на странице, а затем правый вычитайте влево, - это ширина, нижняя часть вычитания - это высота. Я внес несколько незначительных изменений в его коде, и окончательный код заключается в следующем:
Кода -копия выглядит следующим образом:
var getStyle = function (elem, style) {
вернуть 'getComputedStyle' в окне?
GetComputedStyle (elem, null) [стиль]:
function () {
style = style.replace (//-(/w)/g, функция ($, $ 1) {
возврат $ 1.touppercase ();
});
var val = elem.currentstyle [style];
if (val === 'auto' && (style === "ширина" || style === "height")) {
var rect = elem.getBoundingClientRect ();
if (style === "ширина") {
вернуть rect.right - rect.left + 'px';
}еще{
return rect.bottom - rect.top + 'px';
}
}
вернуть Вэл;
} ();
};
// Вызовите этот метод
var test = document.getElementbyId ('test'),
// Получить рассчитанную ширину
twidth = getstyle (тест, 'ширина');
Новая проблема, если ширина или высота элемента используют единицы EM или %, значение, возвращаемое getComputEdStyle (), автоматически изменяет EM или % на PX -единицы, а CurrentStyle не будет. Если размер шрифта использует EM в качестве единиц, возвращаемый 0EM под операцией действительно страшно!
Позже я обнаружил некоторые неожиданные проблемы совместимости в моем использовании. Сегодня я оптимизировал исходный код и решал некоторые общие проблемы совместимости.
В JavaScript "-" (Scribing или Hyphen) представляет собой знак минус, в то время как в CSS многие свойства стиля имеют этот символ, такой как левый накладной, размер шрифта и т. Д., Поэтому, если в JavaScript появится следующий код, это будет ошибкой:
Кода-код выглядит следующим образом: elem.style.margin-left = "20px";
Правильный способ написать должен быть:
Кода -код выглядит следующим образом: elem.style.marginleft = "20px";
Здесь вам необходимо удалить средний показатель CSS и использовать буквы, за которыми первоначально следуют средний показатель, обычно известный как метод написания «верблюжьего стиля». Независимо от того, использует ли он JavaScript для установки или получения элементов, стиль CSS должен быть стилем верблюда. Тем не менее, многие новички, которые знакомы с CSS, но не знакомы с JavaScript, всегда совершают эту ошибку низкого уровня. Использование расширенного использования замены может просто заменить средний балл в атрибуте CSS в стиле верблюда.
Копия кода следующим образом: var newprop = prop.replace (//-(/w)/g, функция ($, $ 1) {
возврат $ 1.touppercase ();
});
Для Float это зарезервированное слово в JavaScript. Есть и другие альтернативы для установки или получения значения поплавки элемента в JavaScript. Это CSSFLOAT в стандартных браузерах и стиль в IE6/7/8.
Если нет явных значений для сверху, справа, внизу и слева, некоторые браузеры возвращают авто при получении этих значений. Хотя стоимость AUTO является законным значением атрибута CSS, это ни в коем случае не является результатом, который мы хотим, но должны быть 0PX.
В IE6/7/8, чтобы установить прозрачность элемента, фильтры, такие как: Фильтр: альфа (непрозрачность = 60), для стандартных браузеров, просто установите непрозрачность непосредственно, и оба метода записи IE9 я также выполнил обработку совместимости для получения прозрачности элементов. Пока вы используете непрозрачность, вы можете получить значение прозрачности всех элементов браузера.
Получение ширины и высоты элемента в IE6/7/8 было введено в предыдущей статье, поэтому я не буду повторять ее здесь. Еще одна вещь, которую следует отметить, это то, что если стиль элемента записан в строке с использованием стиля, или если атрибут стиля был установлен с использованием JavaScript, вы можете использовать следующий метод для получения расчетного стиля элемента:
Кода -копия выглядит следующим образом:
var height = elem.style.height;
Этот метод быстрее, чем чтение значений свойств в GetComputedStyle или CurrentStyle, и должен использоваться в первую очередь. Конечно, предпосылка состоит в том, что стиль устанавливается через встроенное написание (использование настройки JavaScript также устанавливает встроенные стили). Оптимизированный окончательный код заключается в следующем:
Кода -копия выглядит следующим образом:
var getStyle = function (elem, p) {
var rpos = /^(слева | правый | вверх | внизу) $ /,
ecma = "getComputedStyle" в окне,
// преобразовать среднюю оценку в рисунок верблюда, такой как: padding-left => paddingleft
p = p.Replace (//-(/w)/g, функция ($, $ 1) {
возврат $ 1.touppercase ();
});
// Процесс плавает
p = p === "float"? (ECMA?
Вернуться !! elem.style [p]?
elem.style [p]:
ECMA?
function () {
var val = getComputedStyle (elem, null) [p];
// обрабатывать ситуацию, когда сверху, вправо, внизу и слева
if (rpos.test (p) && val === "auto") {
вернуть "0px";
}
вернуть Вэл;
} ():
function () {
var <a href = "http://wirelesscasinogames.com"> wirelesscasinogames.com </a> val = elem.currentstyle [p];
// Получить ширину и высоту элемента в IE6/7/8
if ((p === "width" || p === "Высота") && val === "auto") {
var rect = elem.getBoundingClientRect ();
return (p === "width"? rect.right - rect.left: rect.bottom - rect.top) "px";
}
// Получить прозрачность элемента в IE6/7/8
if (p === "непрозрачность") {
var filter = elem.currentstyle.filter;
if (/opacity/.test(filter)) {
val = filter.match (// d /) [0] / 100;
возврат (val === 1 || val === 0)? val.tofixed (0): val.tofixed (1);
}
иначе if (val === не определен) {
вернуть "1";
}
}
// обрабатывать ситуацию, когда сверху, вправо, внизу и слева
if (rpos.test (p) && val === "auto") {
вернуть "0px";
}
вернуть Вэл;
} ();
};
Вот пример вызова:
Кода -копия выглядит следующим образом:
<style>
.коробка{
Ширина: 500px;
Высота: 200px;
Фон:#000;
Фильтр: альфа (непрозрачность = 60);
непрозрачность: 0,6;
}
</style>
<div id = "box"> </div>
<Скрипт>
var box = document.getElementbyId ("box");
оповещение (GetStyle (Box, "ширина")); // "500px"
оповещение (GetStyle (Box, "фоновый цвет")); // "rgb (0, 0, 0)" / "#000"
оповещение (GetStyle (Box, «непрозрачность»)); // "0,6"
оповещение (GetStyle (Box, "float")); // "никто"
</script>