Как проверить стиль CSS с помощью JavaScript?

Вопрос: Почему я не могу проверить стиль CSS так: if (document.getElementById("myText").style.outline == "10px solid black") { // Do something } или же if (document.getElementById("myText").style.match("outline: 10px solid black")) { // Do something; } когда у меня есть: #myText { outline: 10px solid black; } Лучший ответ: Свойство style будет возвращать только стили, установленные в атрибуте style

Вопрос:

Почему я не могу проверить стиль CSS так:

if (document.getElementById(«myText»).style.outline == «10px solid black») { // Do something }

или же

if (document.getElementById(«myText»).style.match(«outline: 10px solid black»)) { // Do something; }

когда у меня есть:

#myText { outline: 10px solid black; } Лучший ответ:

Свойство style будет возвращать только стили, установленные в атрибуте style элемента или в javascript, поэтому вы не увидите стили, которые применяются отдельно CSS.

Кроме того, существует несколько способов выражения одного и того же набора свойств CSS, и браузер генерирует строку, описывающую текущие свойства (вместо того, чтобы возвращать любую строку, которую вы использовали для их установки). Поэтому браузер может и будет изменять порядок значений свойств и/или преобразовывать их в другие блоки (например, black → rgb(0,0,0)), поэтому тестирование для конкретной строки никогда не будет надежным. Например

document.body.style.outline = «10px solid black» console.log(document.body.style.outline)Ответ №1

Я предполагаю, что getComputedStyle поможет найти подходящий стиль

var elem1 = document.getElementById(«myText»), style = window.getComputedStyle(elem1, null); console.log(style.outline)#myText { outline: 10px solid black; }<div id=»myText»>Text</div>

Оцените статью
Добавить комментарий