jQuery可以改变css样式定义吗？（不是每个元素的单个 css）答案

【问题标题】：Can jQuery change css style definition? (not individual css of each element)jQuery可以改变css样式定义吗？（不是每个元素的单个 css）
【发布时间】：2011-03-11 00:49:42
【问题描述】：

我还没有看到任何文档说 jQuery 可以更改任何 CSS 定义，例如更改

td { padding: 0.2em 1.2em }

到

td { padding: 0.32em 2em }

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

是否可以更改样式定义？

【问题讨论】：

标签： javascript jquery css stylesheet

【解决方案1】：

现在可以使用 CSS 变量

CSS：

:root{
--my-padding: 0.2em 1.2em;
}

td{
padding:var(--my-padding)
}

jQuery:

let paddingX = 0.32
let paddingY = 2
$(':root').css('--my-padding',`${paddingX }em ${paddingY }em`)

【讨论】：

【解决方案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>

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

【讨论】：

【解决方案4】：

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

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

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

现在只需 $('body').addClass('changed') 和所有 tds 更新。

如果您真的必须使用样式表：

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

这假定所讨论的td 规则是第一个样式表中的第一条规则。如果没有，您可能必须通过迭代规则来寻找正确的选择器文本来搜索它。或者只是在末尾添加一个新规则，覆盖旧规则：

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

【讨论】：

值得注意的是，IE（包括IE10）并没有保留原来的selectorText。在 CSS 样式表中写为 .foo.bar 的内容可能会在 DOM 规则对象中以 .bar.foo 结尾。这使得“寻找正确的选择器文本”变得异常脆弱。
@Tomalak：是的 - 事实上，规范中没有要求 selectorText 包含与原始选择器完全相同的字符串。它与innerHTML 相同 - 解析器将源转换为一堆对象，然后读取属性会产生一个序列化，该序列化是反映浏览器正在使用的信息的文本表示，但不是以任何方式的序列化保证与来源相同。因此，搜索确切的 selectorText 本质上是不可靠的。
这个答案最好的部分是：“更好的方法......祖先的班级变化”

【解决方案5】：

不，它只是不能这样工作......不确定有什么比这更好的解释方式:)

jQuery 设计用于处理元素...如果您这样做是为了测试，Chrome 控制台的 Firebug 是选项。

您可以做的事情是拥有一个服务器端生成的样式表，例如 ThemeRoller 是如何做到的，而 jQuery（或 vanilla JS）动态地将 <link> 添加到您的标题中，类似：

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

如果是最后一个链接，它会覆盖之前定义的样式...事实上，正是 ThemeRoller 的工作原理。

【讨论】：