Может ли jQuery изменить определение стиля CSS? (не отдельные css каждого элемента)

Я не видел никаких документов, говорящих о том, что jQuery может изменить любое определение CSS, такое как изменение

td { padding: 0.2em 1.2em }

to

td { padding: 0.32em 2em }

но либо нужно изменить всю таблицу стилей, либо изменить класс каждого элемента, либо изменить css каждого элемента.

Можно ли изменить определение стиля?

Ответы

Ответ 1

Доступ к таблицам стилей DOM существует, но это одна из тех вещей, которые мы склонны избегать, потому что IE нуждается в загрузке совместимости.

Лучшим способом было бы, как правило, инициировать изменение косвенно, используя простое изменение класса для предка:

td { padding: 0.2em 1.2em }
body.changed td { padding: 0.32em 2em }

Теперь просто $('body').addClass('changed') и все обновления td.

Если вам действительно нужно frob stylesheets:

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 сам не предоставляет вам никаких специальных инструментов для доступа к таблицам стилей, но возможно, что есть плагины, которые могут быть.

Ответ 2

$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>');

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

$('#customCSS').remove();

Ответ 3

Я столкнулся с проблемой, когда я не знал ширину, которую хотел класс, пока она не была загружена, и сделала это.

<script>
$(function() {
    calcWidth = CalculateWidth();

    $('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>');
}
</script>

Примечание: может возникнуть вопрос, где вы помещаете script (prepend, append) в зависимости от того, как вы хотите, чтобы правила "каскадировались".

Ответ 4

Нет, он просто не работает таким образом... не уверен, что лучший способ объяснить это:)

jQuery был разработан для работы с элементами... если вы это делаете для тестирования, Firebug консоли Chrome - это параметры.

Что-то, что вы могли бы сделать, имеет созданную на стороне сервера таблицу стилей, например, как ThemeRoller делает это, а jQuery (или vanilla JS) динамически добавляет, что <link> в ваш заголовок, что-то вроде:

<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" />

Если это была последняя ссылка, она переопределит ранее определенный стиль... на самом деле это именно то, как работает ThemeRoller.