Как определить селектор CSS на объекте DOM?

Question

У меня есть такой элемент, как element = document.getElementyById ("myElement");

Теперь давайте предположим, что к нему применен некоторый CSS-код с помощью различных методов, таких как #id, .classи tagName.

Мы знаем, что #id имеет приоритет над .class, а .class имеет приоритет над tagName.Я хочу определить, какой из вышеуказанных методов применяется к этому элементу, т.е. я хочу увидеть, применен ли к нему CSS, используя id, class или tag.Как бы я это выяснил?Для этого есть какая-нибудь библиотека JavaScript?

Answer 1

Просмотрите объект document.styleSheets, итерируйте по каждому объекту таблицы стилей, а затем по каждому правилу.Затем вам нужно будет проанализировать свойство selectorText, по сути, написать собственный синтаксический анализатор CSS, сохраняя при этом внутренний массив в отношении специфики каждого селектора.

Сравните специфику текущего правила с предыдущими, затем определите, какое свойство переопределяет какое.После всего этого вам все равно нужно будет проверить наследование - просмотрите каждый родительский элемент рассматриваемого элемента и найдите свойства, которые можно унаследовать, и добавьте их в этот список, если они еще не установлены для дочерних элементов,Это также означает, что вам нужно будет поддерживать набор свойств, которые наследуются.

Если вы не поняли, это довольно сложное дело.Почему бы просто не пойти и не использовать все инструменты разработчика, доступные для вашего браузера, и взглянуть на правила CSS, предоставленные ими.

Answer 2

Это было задано здесь и здесь и многих других местах.

Answer 3

Почему бы вам не проверить

element = document.getElementyById("myElement");
if (element.tagName != "") { ... }
if (element.id != "") { ... }
if (element.className != "") { ... }