Почему getComputedStyle не работает с псевдоклассами, такими как:hover?

Функция window.getComputedStyle предполагается, что он сможет получить вычисляемый стиль псевдоклассов, таких как:hover, в соответствии с документацией.

Это также объясняется как ответ на другой вопрос

Но, как говорится в последнем комментарии по этому вопросу, на самом деле он вообще не работает, он просто возвращает обычный стиль, а не стиль: hover. Вы можете сами убедиться в этом jsfiddle. Предупреждение возвращает красный цвет, а не зеленый.

В документации на developer.mozilla.org также есть пример, но он тоже не работает - смотрите здесь.

В этом вопросе ответчик заявляет в комментарии, что он вообще не будет работать, но без объяснения причин.

Может ли быть так, что таблица стилей должна быть полностью обработана, прежде чем функция вернет правильное значение? Я пытался установить некоторые задержки, но, похоже, ничего не работает.

Я пробовал последние версии браузеров Firefox, Chrome и IE. Кто-нибудь знает, почему эта функция не работает, как ожидалось?

Источник

2 ответа

Решение
var style = window.getComputedStyle(element[, pseudoElt]);

где pseudoElt это "строка, указывающая псевдоэлемент для сопоставления". Псевдоэлемент это что-то вроде ::before или же ::after это элементы, которые генерируются стилями CSS. :hover, :visited или другие подобные эффекты - псевдоклассы. Они не будут создавать новые элементы, но будут применять к этому элементу стили специализированных классов.

Невозможно получить вычисляемый стиль псевдокласса, по крайней мере, с getComputedStyle, Однако вы можете пройти через правила CSS и попытаться найти подходящий селектор, но я не рекомендую вам делать это, поскольку некоторые браузеры не будут следовать правилам стиля DOM-Level-2, и вам придется проверить, какие правило будет влиять на ваш конкретный элемент:

/* Style */
p a:hover{ color:yellow; background:black;}
p > a:hover{ color:green; background:white;}
p > a+a:hover{ color:fuchsia; background:blue;}

// JS
var i,j, sel = /a:hover/;
for(i = 0; i < document.styleSheets.length; ++i){
    for(j = 0; j < document.styleSheets[i].cssRules.length; ++j){    
        if(sel.test(document.styleSheets[i].cssRules[j].selectorText)){
            console.log(
                document.styleSheets[i].cssRules[j].selectorText,
                document.styleSheets[i].cssRules[j].style.cssText
            );
        }
    }
}

 Результат:
па: цвет при наведении: желтый; фон: нет повторяющейся прокрутки 0% 0% черный; 
p > a: цвет при наведении: зеленый; фон: нет повторной прокрутки 0% 0% белый;
p > a + a: цвет при наведении: фуксия; фон: нет повторной прокрутки 0% 0% синий;

Смотрите также:

Источник

Обратите внимание, что есть способ сделать это по крайней мере для Chrome с включенным удаленным портом отладки. В основном вам нужно использовать WebSocket, подключиться к URL удаленного отладчика, а затем выполнить следующие команды:

send  { id: 1, method: "Inspector.enable" }
send  { id: 2, method: "DOM.enable" }
send  { id: 3, method: "CSS.enable" }
send  { id: 4, method: "DOM.getDocument" }
send  { id: 5, method: "DOM.querySelector", params: { nodeId: 1, selector: <<whatever you want>> } }
nodeId = response.result.nodeId
send  { id: 6, method: "CSS.forcePseudoState", params: { nodeId:, forcedPseudoClasses: [ "hover" <<or whatever>> ] } }

Затем вы можете использовать обычный getComputedStyle или API-интерфейс отладчика CSS.getComputedStyleForNode.

Источник
Другие вопросы по тегам