jQuery可以改变css样式定义吗？(不是每个元素的个别css)

Question

我没有看到任何文档说jQuery可以改变任何CSS定义,如更改

td { padding: 0.2em 1.2em }

至

td { padding: 0.32em 2em }

但要么必须更改整个样式表,要么更改每个元素的类,或者更改每个元素的css.

是否可以更改样式定义？

Answer 1

对样式表有DOM访问权限,但这是我们倾向于避免的事情之一,因为IE需要大量的兼容性.

更好的方法通常是使用祖先上的简单类更改间接触发更改:

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

现在只是$('body').addClass('changed')和所有td的更新.

如果你真的必须从样式表中取出:

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本身并没有为您提供访问样式表的任何特殊工具,但可能有插件可能.

Answer 2

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

我添加了一个id属性,因此您可以在不再希望应用更改时定位并删除它.

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

Answer 3

我遇到了一个问题，在加载并执行此操作之前，我不知道我想要一个类的宽度。

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

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

注意：根据您希望规则“级联”的方式，放置脚本的位置（前置、附加）可能很重要。