Получите объявления CSS с JavaScript

Question

Я пишу сложный визуальный эффект, который меняет свойство "box-shadow".

Давайте для краткости просто назовите значение для тени (1pt 1pt 3pt rgba (...)), например, "shadow".

У меня есть таблица стилей и рассматриваемый элемент HTML.

Элемент имеет, скажем, значение "shadow1", определенное для нормального состояния, и "shadow2" для состояния наведения:

.elem {
    box-shadow: #333 1pt 1pt 3pt; /* shadow1 */
 }
.elem:hover {
    box-shadow: #666 3pt 3pt 5pt; /* shadow2 */
 }

Мой скрипт добавляет собственную тень к существующей. Итак:

box-shadow: shadow1, shadow2

Это просто реализовать. Мне просто нужно сделать следующее, используя jQuery:

var defaultShadow = elem.css("box-shadow");
elem.css("box-shadow", defaultShadow + ", " + anotherShadow);

Итак, алгоритм следующий:

1. var defaultShadow = elem.css("box-shadow");
2. Сделайте что-нибудь в setInterval. Добавьте еще одну тень к одной по умолчанию

Проблема возникает при наведении элемента на работающий скрипт-эффект. В этом случае эффект уже работает с «defaultShadow», полученным на шаге 1.

Это сложнее, потому что тени, указанные в скрипте, появляются в атрибуте "style", а все правила, объявленные с внешним CSS, переопределяются.

Есть ли способ получить стили CSS, объявленные в файле .css, для рассматриваемого элемента, используя JavaScript. Мне также нужны стили для состояний элемента, например: "hover", ": active" и т. Д.

Answer 1

Есть ли способ получить стили CSS, объявленные в файле .css, для рассматриваемого элемента, используя JavaScript.Мне также нужны стили для состояний элемента, такие как "hover", "active" и т. Д.

Вы должны иметь возможность изменять объект cssRules с помощью javascript, чтобы создать свой собственныйправила вместо того, чтобы полагаться на встроенные стили.

См. сообщение в блоге для получения дополнительной информации.

Пример IE:

document.styleSheets[0].addRule("p .myclass", "font-size: 120%");

Пример для Firefox:

document.styleSheets[0].insertRule("p{font-size: 20px;}", 0);

Ссылка Документ они были найдены.

Answer 2

document.getElementById("id").className = 'arrow_box