Изменить объект правила CSS с помощью JavaScript

Возможный дубликат:
Изменение набора правил CSS из Javascript

Мне было интересно, есть ли возможность изменить объявления таблиц стилей Css без использования встроенных стилей.

Вот быстрый пример:

<style>
    .box {color:green;}
    .box:hover {color:blue;}
</style>

<div class="box">TEXT</div>

Это дает синюю надпись, которая становится зеленой надписью при наведении курсора.

Если я приведу встроенный стиль для цвета, поведение при наведении будет потеряно:

<div class="box" style="color:red;">TEXT</box>

Это дает красную письменную коробку, несмотря ни на что.

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

Спасибо,

Источник

2 ответа

Решение

Вы могли бы использовать cssRules на объекте таблицы стилей DOM, соответствующем вашей исходной таблице стилей, чтобы изменить ваше правило.

var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules;

rules[0].style.color = 'red';

Обратите внимание, что IE использует rules вместо cssRules,

Вот демонстрация: http://jsfiddle.net/8Mnsf/1/

Источник

Просто определите свои классы и назначьте / удалите классы для элементов HTML с помощью JavaScript.

Непосредственное присвоение стиля элементу, имеющему наивысший приоритет, отменяет все остальные правила CSS.

РЕДАКТИРОВАТЬ:

Вы можете использовать свойство cssText

см. пример здесь cssText свойство

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