Как получить точное значение атрибута CSS, когда свойство переписывается в CSS класса

Question

Предположим, у меня есть li, такие как:

<li id="1" class="show" style="display: none;">

и внутри класса CSS У меня есть:

.show { 
    display: list-item !important; 
} 

Я написал:

document.getElementById("1").style.display 

, чтобы получить значение атрибута отображения.

и он возвращает "none".

Однако, из-за класса .css, это display is list-item. Как я могу получить правильное и прикладное значение display с js?

Answer 1

Window.getComputedStyle() может помочь https://jsfiddle.net/br3t/16uyukxk/

var elem = document.getElementById("li1"); 
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("display"); 

Answer 2

Вы не должны использовать встроенный стиль css, поэтому удалите style="display: none;" из html, создайте класс .hidden { display: none; } в вашем файле css и примените скрытые или показать в зависимости от того, что вы хотите сделать. Затем вы сможете узнать, является ли ваш элемент видимым или нет, проверяя, какой класс CSS он имеет.

Answer 3

Это значение свойства отображения атрибута атрибута стиля. То, что у вас есть в вашей разметке.

console.log(document.getElementById("1").style.display)

.show { 
 
    display: list-item !important; 
 
}

<li id="1" class="show" style="display: none;">adsfds</li>

Но на выходе браузера вы можете увидеть в элементе инспектировать, то display: list-item !important; был применен

см ниже изображение

Чтобы получить фактический прикладной стиль, вы можете использовать getComputedStyle, как показано ниже

var elem = document.getElementById("1"); 
 

 
console.log(window.getComputedStyle(elem).display)

.show { 
 
    display: list-item !important; 
 
}

<li id="1" class="show" style="display: none;">adsfds</li>

Примечание: Вам не нужно устанавливать list-item к элементу списка. Его всегда элемент списка по умолчанию.

Answer 4

Вы ищете стиль, который фактически используется для визуализации элемента, вам нужно window.getComputedStyle:

var display = window.getComputedStyle(element).display 

Кстати, id не должен быть запущен с номером, это недопустимый HTML.

Answer 5

Вы ищете вычисленный стиль.Смотрите эту http://javascript.info/tutorial/styles-and-classes-getcomputedstyle

getComputedStyle(document.getElementById("1"))["display"]

Answer 6

Javascript Решение: использованием getComputedStyle

var elem = document.getElementById("1"); 
 
alert(window.getComputedStyle(elem, null).getPropertyValue("display"));

.show { 
 
    display: list-item !important; 
 
}

<li id="1" class="show" style="display: none;">

Jquery Решение: использованием .css

alert($('#1').css('display'));

.show { 
 
    display: list-item !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<li id="1" class="show" style="display: none;">