Вопрос по javascript, css – Чтение информации о не встроенном стиле CSS из Javascript

4

Я знаю, что я должен что-то здесь упустить, но я не могу заставить это работать.

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

<html>
<head>
<style>
body { background-color: #ff0; }
</style>
</head>
<body>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

.. однако, если я назначу стиль inline, он работает:

<html>
<head></head>
<body style='background-color: #ff0;'>
<a href="#" onclick='alert(document.body.style.backgroundColor)'>Click Here</a>
</body>
</html>

Я знаю, что упускаю что-то простое, но мой ум сегодня не в зоне - может кто-нибудь сказать мне, почему мой первый сценарий не работает?

Спасибо

Ваш Ответ

4   ответа
7

style свойство элемента DOM относится только к элементуinline стили.

В зависимости от браузера вы можете получить фактический стиль элемента, используяДОМ CSS

В Firefox, например:

var body = document.getElementsByTagName("body")[0];
var bg = window.getComputedStyle(body, null).backgroundColor;

Или в IE:

var body = document.getElementsByTagName("body")[0];
var bg = body.currentStyle.backgroundColor;
идеально - именно то, что я искал. Спасибо, Мэтт! OneNerd
4

computedStyle на элементе какstyle атрибут еще не установлен. В IE вам нужно будет проверить элементcurrentStyle собственность, черезчто-то вроде этого.

0

ы css элемента в Javascript, о котором я знаю, если не считать специфичные для браузера утилиты.

1

которую вы можете использовать (без использования платформы, т. Е.), Которая была опубликованаВот отInsDel:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
                (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test')

Похожие вопросы