Получить стиль таблицы стилей элемента в JavaScript
-
23-08-2019 - |
Вопрос
Я пользовался услугами Джона Ресига getStyle
функция из профессиональных методов JavaScript для получения стиля элементов:
function getStyle(elem, name) {
// J/S Pro Techniques p136
if (elem.style[name]) {
return elem.style[name];
} else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
} else {
return null;
}
}
Однако этот метод возвращает стили по умолчанию для элемента, если стиль не указан:
http://johnboxall.github.com/test/getStyle.html
альтернативный текст http://img.skitch.com/20081227-8qhxie51py21yxuq7scy32635a.png
Возможно ли получить только указанные в таблице стилей стили элемента (и вернуть null, если стиль не определен)?
Обновить:
Зачем мне нужен такой зверь?Я создаю небольшой компонент, который позволяет пользователям стилизовать элементы.Одним из стилей, которые могут быть применены, является text-align
- left
, center
, right
- Использование getStyle
неструктурированные элементы по умолчанию имеют значение center
.Это делает невозможным определить, центрирован ли элемент потому, что пользователь хотел, чтобы он был центрирован, или потому, что это стиль по умолчанию.
Решение
Возможно ли получить только стили, указанные в таблице стилей элемента (и возвращать null, если стиль не определен)?
Это фактически то, что делается с помощью рутины, которую вы представляете.Проблема в том, что в большинстве сценариев большинство стилей являются не неопределенные - они наследуются и / или определяются внутренней таблицей стилей отдельного браузера.
Вы могли бы, приложив массу усилий, повторить ВСЕ из правил, определяющих рассматриваемый стиль, в ВСЕ из таблиц стилей в текущем представлении документа оцените их для рассматриваемого элемента, и если ни одна из них не применена...и если ни один из них не применен к родительскому (или этот конкретный стиль не наследуется)...тогда считайте это неопределенным.Это было бы медленно, и невероятно подвержен ошибкам.Я бы не рекомендовал пробовать это.
Возможно, вам было бы лучше сделать шаг назад и спросить, зачем вам вообще понадобилась такая вещь?
Другие советы
Может быть, ваш компонент может переносить стили, которыми он управляет?Затем, когда стиль задается с помощью компонента, компонент знает, чего хочет пользователь.