Javascript: получить CSS-селекторы по элементу

Возникла необычная задача такого рода:

Нужно получить все CSS-селекторы, однозначно определяющие данный элемент на странице.

Может быть кто-нибудь знает существующее решение?
Если нет — может подскажете простой алгоритм решения?
  • Вопрос задан
  • 5839 просмотров
Пригласить эксперта
Ответы на вопрос 5
Melanitsky
@Melanitsky
$(document).click(function(event) {
console.log(GetAppliedCssRules($(event.target)));
});

function GetAppliedCssRules($element) {
var appliedRules = [];
for (var x = 0; x < document.styleSheets.length; x++) {
var rules = document.styleSheets[x].cssRules;
for (var i = 0; i < rules.length; i++) {
if ($element.is(rules[i].selectorText)) {
appliedRules.push(rules[i].selectorText);
}
}
}
return appliedRules;
}
Ответ написан
Комментировать
@chikuyonok
А XPath-селектор не подойдёт? Типа body[1]/div[2]/p[5]
Ответ написан
Комментировать
printf
@printf
Ем детей.
Если у элемента есть id, то '#' + id — селектор, однозначно определяющий этот элемент на странице.
Если у элемента нет id, нужно сгенерировать уникальный id; GOTO 10

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

Если есть id — все очевидно.
Ответ написан
Открыть в Crome инспектор, через cmd + alt + c выбрать нужный элемент, который выделится в панели Elements и оттуда через меню Copy - Copy selector получить точный селектор.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы