JQuery может изменить определение стилей CSS? (не отдельная CSS каждого элемента)
Я не видел, что в любых документах говорится, что jQuery может изменить любое определение CSS, такое как изменение
td { padding: 0.2em 1.2em }
кому:
td { padding: 0.32em 2em }
но или должны изменить целую таблицу стилей, или класс изменения каждого элемента или CSS изменения каждого элемента.
Действительно ли изменение является возможным определением стилей?
2 ответа
Существует DOM-доступ к таблицам стилей, но это одна из тех вещей, которых мы стараемся избегать, потому что IE требует большого количества мусора, связанного с совместимостью.
Как правило, лучшим способом было бы инициировать изменение косвенно, используя простое изменение класса для предка:
td { padding: 0.2em 1.2em }
body.changed td { padding: 0.32em 2em }
Теперь просто $ ('body'). AddClass ('changed') и все обновления td s.
Если вам действительно необходимо заблокировать таблицы стилей:
var sheet= document.styleSheets[0];
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility
rules[0].style.padding= '0.32em 2em';
Это предполагает, что рассматриваемое правило td является первым правилом в первой таблице стилей. В противном случае вам, возможно, придется искать его, повторяя правила, ища правильный selectorText. Или просто добавьте новое правило в конец, переопределив старое:
if ('insertRule' in sheet)
sheet.insertRule('td { padding: 0.32em 2em }', rules.length);
else // IE compatibility
sheet.addRule('td', 'padding: 0.32em 2em', rules.length);
jQuery сам по себе не дает вам никаких специальных инструментов для доступа к таблицам стилей, но, возможно, есть плагины, которые могут.
Нет, это просто так не работает ... не знаю лучшего способа объяснить это, чем это:)
jQuery был разработан для работы с элементами ... если вы делаете это для тестирования, Тем не менее, Firebug консоли Chrome - это варианты.
Что-то, что вы могли бы сделать, - это создать сгенерированную на стороне сервера таблицу стилей, например, как это делает ThemeRoller , а jQuery (или vanilla JS) динамически добавляет, что < ссылка> в ваш заголовок, что-то вроде:
<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" />
Если бы это была последняя ссылка, она переопределила бы ранее определенный стиль ... на самом деле это именно , как работает ThemeRoller.