Читайте: парящий псевдо-класс с JavaScript

Я сделал функцию, которая перезаписывает:hover некоторых элементов на странице. Он исчезает между нормалью и эффектом:hover. Для этого мне нужно было создать класс.hover в моем файле CSS. Я думаю, что это немного нечисто. Как я могу прочитать содержимое псевдо-класса:hover?

Источник

4 ответа

Решение

ОБНОВЛЕНИЕ: я как-то понял это неправильно. Приведенный ниже пример не работает. Смотрите комментарий @bfavaretto для объяснения.

В Firefox, Opera и Chrome или любом другом браузере, который правильно реализует window.getComputedStyle очень просто Вы просто должны передать "hover" в качестве второго аргумента: 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
  display: block;
  width: 200px;
  height: 200px;
  background: red;
}
div:hover {
  background: green;
}
</style>
</head>
<body>

<div></div>

<script type="text/javascript">
window.onload = function () {
    var div = document.getElementsByTagName("div")[0];
    var style = window.getComputedStyle(div, "hover");
    alert(style.backgroundColor);
};
</script>
</body>
</html>

Но я не верю, что есть еще решение для Internet Explorer, кроме использования document.styleSheets как предложил Гамбо. Но будут различия. Итак, имея .hover класс пока лучшее решение. Не совсем нечисто.

Источник

С помощью getComputedStyle так как на принятый ответ не сработает, потому что:

  1. Вычисленный стиль для состояния наведения доступен только тогда, когда элемент фактически находится в этом состоянии.
  2. Второй параметр для getComputedStyle должен быть пустым или псевдоэлементом. Не работает с :hover потому что это псевдокласс.

Вот альтернативное решение:

function getCssPropertyForRule(rule, prop) {
    var sheets = document.styleSheets;
    var slen = sheets.length;
    for(var i=0; i<slen; i++) {
        var rules = document.styleSheets[i].cssRules;
        var rlen = rules.length;
        for(var j=0; j<rlen; j++) {
            if(rules[j].selectorText == rule) {
                return rules[j].style[prop];
            }
        }
    }
}

// Get the "color" value defined on a "div:hover" rule,
// and output it to the console
console.log(getCssPropertyForRule('div:hover', 'color'));

демонстрация

Источник

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

Источник

Если здесь есть люди, которые используют ответы на принятые вопросы, но это не сработает, вот хорошая функция, которая может:

function getPseudoStyle(id, style) {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
        var targetrule = "";
        if (all[i].id === id) {
            if(all[i].selectorText.toLowerCase()== id + ":" + style) { //example. find "a:hover" rule
                targetrule=myrules[i]
            }
        }
        return targetrule;
    }
}
Источник

Есть альтернативный способ получить :hoverпсевдокласс с javascript. Вы можете написать свои стилиhover псевдокласс в content свойство.

p::before,
p::after{
  content: 'background-color: blue; color:blue; font-size: 14px;';
}

затем прочтите его с помощью метода getComputedStyle():

console.log(getComputedStyle(document.querySelector('p'),':before').getPropertyValue('content'));
Источник
Другие вопросы по тегам