Can jQuery change css style definition? (not individual css of each element)

Brian Webster太極者無極而生提出了一个问题:Can jQuery change css style definition? (not individual css of each element),或许与您遇到的问题类似。

回答者bobince给出了该问题的处理方式:

There is DOM access to stylesheets, but it's one of those things we tend to avoid because IE needs a load of compatibility cruft.

A better way would be typically be to trigger the change indirectly, using a simple class change on an ancestor:

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

Now just $('body').addClass('changed') and all the tds update.

If you really must frob the stylesheets:

var sheet= document.styleSheets[0];
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility
rules[0].style.padding= '0.32em 2em';

This assumes that the td rule in question is the first rule in the first stylesheet. If not, you might have to go searching for it by iterating the rules looking for the right selectorText. Or just add a new rule to the end, overriding the old one:

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 itself doesn't give you any special tools to access stylesheets, but it's possible there are plugins that might.

希望本文对你有帮助,欢迎支持JavaScript中文网


公众号

欢迎 JavaScript 爱好者