В Firefox, как я могу изменить существующее правило CSS

Question

В Firefox у меня есть следующий фрагмент в моем файле .css

tree (negative){  font-size: 120%; color: green;}

Используя javascript, как мне изменить правило , чтобы установить красный цвет?

Примечание:
Я не хочу менять элемент.
Я хочу изменить правило. Пожалуйста, не отвечайте с чем-то вроде

...

element.style.color = 'red';

Answer 1

То, что вы ищете, это свойство document.styleSheets, с помощью которого вы можете получить доступ к своим правилам CSS и манипулировать ими. Большинство браузеров имеют это свойство, однако интерфейс для IE немного отличается.

Например, попробуйте вставить следующую строку в FF для этой страницы и нажать клавишу ввода:

javascript:alert(document.styleSheets[0].cssRules[1].cssText)

Для меня это дает строку "body { line-height: 1; }". Существуют методы / свойства, которые позволяют вам манипулировать правилами.

Вот библиотека, которая абстрагирует этот интерфейс для вас (кросс-браузер): http://code.google.com/p/sheetup/

Answer 2

function changeCSSRule (stylesheetID, selectorName, replacementRules) {
    var i, theStylesheet = document.getElementById(stylesheetID).sheet,
    thecss = (theStylesheet.cssRules) ? theStylesheet.cssRules : theStylesheet.rules;
    for(i=0; i < thecss.length; i++){
        if(thecss[i].selectorText == selectorName) {
            thecss[i].style.cssText = replacementRules;
        }
    }
};

Answer 3

Вы можете изменить правила CSS в таблицах стилей с помощью объектной модели CSS (в настоящее время известной как DOM Level 2 Style). Однако, если в вашей таблице стилей буквально есть «дерево (отрицательное)», это правило будет отброшено и вообще не появится в объектной модели.

Answer 4

Я хочу изменить правило, чтобы при переходе на следующую страницу мне больше не приходилось вносить все изменения.

Здесь есть два подхода, о которых я могу подумать. А именно на стороне клиента и / или на стороне сервера.

Клиентская сторона: Сохраните настройки темы в куки и загрузите их в следующий раз, используя javascript.

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

В конце концов, вы все еще пишете такие вещи, как element.style.color =. Но они должны получить то, что вы хотите.

Answer 5

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

Похоже, что вам может потребоваться удаленный запрос ("ajax") на сервер с запросом, который вы хотите сделать, и создание динамической таблицы стилей, которая отправляется обратно клиенту?

Как / почему этот Firefox специфичен?

Answer 6

Если вы хотите изменить отрисованные правила CSS с одного запроса страницы на другой, тогда потребуется какой-то сценарий на стороне сервера. В противном случае исходная таблица стилей просто перезагрузится при запросе следующей страницы.

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

Answer 7

Для отладки вы можете использовать Firebug , чтобы изменять правила CSS на лету.

Answer 8

Как я уже сказал в комментарии другого ответа, я никогда не видел, чтобы это делалось так, как вы хотите. Я только когда-либо предназначался для элементов так же, как CSS-рендерер, и менял стиль каждого элемента.

Я видел это, хотя: jQuery.Rule

Это звучит , как будто он делает то, что вы хотите, но демо заставляет мой браузер немного вылетать. Я бы пригласил вас взглянуть на источник, чтобы убедиться, что он действительно делает то, что вы хотите, и если вы хотите использовать его без jQ, используйте его в качестве отправной точки.

Редактировать: Да, это должно работать. Он работает, добавляя на страницу еще один тег <style> и записывая свои переопределения внутри. Это довольно просто, если вы хотите перенести его на простой JS.

Answer 9

for( var i in document.getElementsByTagName("tree") ){
   document.getElementsByTagName("tree")[i].style.color = "red";
}

Answer 10

Я не уверен, что вы можете сделать реальные переопределения класса / селектора. Вам нужно будет настроить таргетинг на каждый элемент, который использует класс .tree, и установить CSS. Самый быстрый и простой способ - через jQuery (или другой подобный фреймворк):

$('.tree').each(function() { this.style.color = "red"; });

Вы даже можете использовать встроенные функции CSS:

$('.tree').css('color', 'red');

(я сделал это первым способом, чтобы показать вам, как это сделает стандартный JS. $(...) - это jQuery для выбора всех элементов с классом .tree. Если вы не используете jQuery, вам нужно альтернативный код.)

Если tree - это идентификатор, а не класс (на странице должен быть только один), так что использование getElementById должно быть в порядке. Ваш код должен выглядеть как другой ответ.