Как получить доступ к стилю CSS элемента DOM с чистыми функциями DOM (без jQuery)?

Question

По какой-то причине я не могу получить доступ к элементу стиля HTML display.

Вот мой код JavaScript:

var el = document.querySelector('#warning'); 
console.log(el.style.display) 

Мой код возвращает "" пустую строку для #warning «s display стиле, но на самом деле это "none".

Я следующий HTML:

<div id="warning"> 
warning warning warning. 
</div> 

Я следующий CSS:

#warning { 
    display: none; 
} 

Любые идеи?

Answer 1

Вы делаете все правильно по большей части, но то, что вы используете, - это зависание для большинства людей, когда они впервые пробуют это.

Объект стиля в javascript ищет это значение внутри фактического элемента (inline) и не ищет его непосредственно в коде css.

Для доступа к стилю стиль должен существовать в dom. Вы можете посмотреть на Window.getComputedStyle()

Надеюсь, это объясняет, почему вы достигаете этого препятствия.

Answer 2

Если вы знаете, что элемент ID, я бы предложил использовать функцию getElementById();. Также AFAIK метод стиля получает только встроенные стили. Я бы предложил использовать getComputedStyle();. не

Код

var myDiv = document.getElementById("myDiv"); 

alert(getComputedStyle(myDiv).display); 

Выведет "никто".

Пример

http://jsfiddle.net/43jLLd5L/

Чтение Материал

Not directly related to your question but the answer has some good points.