Как изменить/удалить определения классов CSS во время выполнения?

Ответ 1

Не сложно изменить правила CSS во время выполнения, но, по-видимому, трудно найти нужное правило. PPK быстро проведет это на quirksmode.org.

Вы хотите использовать document.styleSheets[i].cssRules, который представляет собой массив, который вам нужно проанализировать, чтобы найти тот, который вы хотите, а затем rule.style.setProperty('font-size','10px',null);

Ответ 2

Я нашел ответ на http://twelvestone.com/forum_thread/view/31411, и я воспроизвожу части потока здесь, дословно, потому что я боюсь, что поток, и очень полезный ответ испарится.

Flip 2006.06.26, 02:45 PM - [Хрустящая лягушка] Сообщения: 2470 Дата присоединения: 2003.01.26

Хорошо после 10-12 часов поиска, чтения и возиться, я это сделал! Я сегодня CSS/JS-код Ninja!

Используемый код JS выглядит следующим образом:

<script language="JavaScript">
function changeRule(theNumber) {
    var theRules = new Array();
    if (document.styleSheets[0].cssRules) {
        theRules = document.styleSheets[0].cssRules;
    } else if (document.styleSheets[0].rules) {
        theRules = document.styleSheets[0].rules;
    }
    theRules[theNumber].style.backgroundColor = '#FF0000';
}
</script>

Я тестировал это на FF (Mac), Safari (Mac), O9 (Mac), IE5 (Mac), IE6 (ПК), FF (ПК), и все они работают. Причина для выражения "если" - это некоторые из браузеров, использующих cssRules... некоторые используют только правила... И единственным другим волосом является то, что вы не можете использовать "background-color" для обозначения стиля, у вас есть чтобы избавиться от дефиса и загладить первую букву после дефиса.

Чтобы ссылаться на первое правило CSS, вы должны использовать "changeRule (0)", второй "changeRule (1)" и третий "changeRule (2)" и т.д....

Я не нашел браузер, на котором он не работает.... пока.... Все, что вы говорите, может и будет использоваться против вас. Снова и снова.

BillyBones 2011.01.20, 11:57 AM - [в стволе] Сообщения: 1 Дата присоединения: 2011.01.20

Здравствуйте, я зарегистрировался на этих форумах, чтобы добавить это немного, поскольку мне не удалось найти его в другом месте:

function changeStyle(selectorText)
{
    var theRules = new Array();
    if (document.styleSheets[0].cssRules) {
        theRules = document.styleSheets[0].cssRules;
    } 
    else if (document.styleSheets[0].rules) {
        theRules = document.styleSheets[0].rules;
    }
    for (n in theRules)
    {
        if (theRules[n].selectorText == selectorText)   {
            theRules[n].style.color = 'blue';
        }
    }
}

Это просто делает правило CSS идентифицируемым по его имени выбора, а не по его номеру индекса в массиве cssRules.

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

Спасибо за 10-12 часов исследований, Флип, надеюсь, я сделал достойное дополнение.

Ответ 3

Я думаю, вы ищете это:

http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript

это позволяет вам изменять фактические правила с помощью javascript. ive использовал его один раз, несколько лет назад он, похоже, сработал.

Ответ 4

Я сделал простую вспомогательную функцию для тех, кто хочет это сделать:

function getCSSRule(search) {
  return [].map.call(document.styleSheets, function(item) {
    return [].slice.call(item.cssRules);
  }).reduce(function(a, b) {
    return b.concat(a);
  }).filter(function(rule) {
    return rule.selectorText.lastIndexOf(search) === rule.selectorText.length - search.length;
  })[0];
}

И тогда вы можете использовать его так:

getCSSRule('.mydiv').style.fontSize = '20px';

Взгляните на приведенный ниже пример:

function getCSSRule(search) {
  return [].map.call(document.styleSheets, function(item) {
    return [].slice.call(item.cssRules);
  }).reduce(function(a, b) {
    return b.concat(a);
  }).filter(function(rule) {
    return rule.selectorText.lastIndexOf(search) === rule.selectorText.length - search.length;
  })[0];
}

document.querySelector('button').addEventListener('click', function(e) {
  getCSSRule('.iframe').style.backgroundColor = 'orange';
});

.iframe {
  height: 200px;
  width: 200px;
  display: inline-block;
  border: 1px solid #000;
}

<p>
  <button>Change .iframe background-color</button>
</p>
<div class="iframe"></div>
<div class="iframe"></div>

Ответ 5

Трудно найти нужное правило, потому что вам нужно выполнить итерацию в массиве document.styleSheets [i].cssRules. (и сравните ваше имя класса с атрибутом selectorText) Поэтому мое решение этой проблемы заключается в добавлении нового класса CSS, удалении старого класса CSS из элемента HTML и добавлении этого класса вместо него.

var length = getCssRuleLength();
var newClassName = "css-class-name" + length;

//remove preview css class from html element.
$("#your-html-element").removeClass("css-class-name");
$("#your-html-element").removeClass("css-class-name" + (length-1));

$("#your-html-element").addClass(newClassName);

//insert a css class
insertCssRule("." + newClassName + ' { max-width: 100px; }', length);


function getCssRuleLength() {
	var length = 0;
	if (document.styleSheets[1].cssRules) {
		length = document.styleSheets[1].cssRules.length;
	} else if (document.styleSheets[1].rules) { //ie
		length = document.styleSheets[1].rules.length;
	}
	return length;
}
function insertCssRule(rule, index) {
	if (document.styleSheets[1].cssRules) {
		document.styleSheets[1].insertRule(rule, index);
	} else if (document.styleSheets[1].rules) { //ie
		document.styleSheets[1].addRule(rule, index);
	}
}

Ответ 6

Я использовал лучшие ответы и объединил их для удобства использования и совместимости с браузерами. Кроме того, я рассмотрел, когда был выброшен ошибки, если на странице не было таблиц стилей, или если правило css еще не существовало.

https://github.com/Frazer/dynamicallyAccessCSS.js