Как получить значение CSS из JS?
Я делаю адаптивный дизайн и использую @Media для настройки CSS в зависимости от размера экрана. Я установил значение css, называемое
.dskcell { дисплей: нет; }
и установите для него значение none, если носитель небольшой, в противном случае display: normal. Что я хочу знать, как получить отображаемое значение dskcell в чистом Javascript?
Я вижу getComputedStyle, но похоже, что ему нужен элемент HTML, который на некоторых страницах не используется css. Как я могу узнать, какое отображаемое значение dskcell отображается в JS?
Обновлено:
<ul id = "mnu" class = "page dskcell">
В Javascript мне нужно знать, скрыт он или показан, поэтому я хочу узнать, каково отображаемое значение dskcell.
возможно, если вы поделитесь достаточным количеством кода, демонстрирующего вашу проблему, вы сможете получить эффективную помощь, и это может объяснить, почему getComputedStyle не работает для вас. если вы не использовали его должным образом. если нет .dskcell, то вы не должны получать никакого значения. developer.mozilla.org/en-US/docs/Web/API/Window/…
попробуйте: document.querySelector('#mnu').style.display; ИЛИ document.getElementById('mnu').style.display; Вы также вызываете выбор классов с помощью querySelector, просто замените «#» на «.». .
из моего предыдущего комментария: вот что я имею в виду: jsfiddle.net/umokv29d и jsfiddle.net/umokv29d/1 Вам нужно проверить, сброшено ли отображение по умолчанию или нет. Если он установлен/сброшен, то у вас есть значение, которое вы можете использовать. если нет, применяется значение по умолчанию (ul — это блок, span — встроенный, li — элемент списка и т. д.)
Так что же вы действительно хотите сделать? Выяснить, отображается ли элемент или нет? И исходя из этого, что вы хотите сделать?
Что я действительно хотел сделать, так это то, что если .dskcell был пустым, то не заполнять меню, а вместо этого заполнять другое меню.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот способ проверить с помощью чистого javascript, отображается ли элемент dskcell. Если применяется медиа-запрос (или элемент dskcell отсутствует), dskcellIsDisplayed будет ложным (в противном случае будет истинным).
document.addEventListener('DOMContentLoaded', () => {
const elem = document.querySelector('.dskcell');
const dskcellIsDisplayed = elem && window.getComputedStyle(elem, null).getPropertyValue("display") !== 'none';
console.info(dskcellIsDisplayed);
});div {
border: 1px solid red;
}
body {
background-color: lightgreen;
}
@media only screen and (max-width: 800px) {
.dskcell {
display: none;
}
body {
background-color: lightblue;
}
}<div class = "dskcell"></div>@MiscellaneousUser Судя по вашему вопросу, вы уже должны были знать об этом методе…‽
Я знал о getComputedStyle, но не мог заставить его работать. Я пытался смотреть на css, а не на элементы, поэтому я обесценил команду. В конце концов, я выбрал другой подход и использовал этот метод.
Я не уверен, зачем вам нужно значение, если вы просто хотите его изменить... тогда обычно не имеет значения, какое значение было раньше.
if (window.innerWidth > 1200 ) {
const el = document.querySelector('.el');
el.style.display = 'none';
} else {
el.style.display = 'block';
}
Или с вычислением: Вы говорите, что не все элементы имеют имя класса «.dskcell». Что ж, добавить еще один класс ко всем из них?
const element = document.querySelector('.element')
const style = getComputedStyle(element).display
console.info(style) // expected: block / none
Если вам действительно нужно значение... В качестве последней вещи в списке, поскольку вы знаете начальное значение, которое вы установили в css, вы можете создать объект, который содержит данные вашего компонента, поскольку вы просто хотите переключаться между блоком и ни одним, вы знаете все возможные значения...
Дело не в том, что «ценность класса — это что-то». Эти значения применяются к элементам на основе селекторов и медиа-запросов. Вы можете осмысленно оценить их только на конкретном элементе. Чтобы узнать размер экрана в Javascript, вам вообще не нужен CSS; просто проверьте соответствующее свойство Javascript.