Javascript jQuery 可以更改 css 样式定义吗？（不是每个元素的单独 css）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3164740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can jQuery change css style definition? (not individual css of each element)
提问by nonopolarity
I haven't seen any docs saying jQuery can change any CSS definition such as changing
我还没有看到任何文档说 jQuery 可以更改任何 CSS 定义，例如更改
td { padding: 0.2em 1.2em }
to
到
td { padding: 0.32em 2em }
but either have to change a whole style sheet, or change class of each element, or change css of each element.
但是要么必须更改整个样式表，要么更改每个元素的类，要么更改每个元素的 css。
Is changing the style definition possible?
是否可以更改样式定义？
回答by 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.
有对样式表的 DOM 访问，但这是我们倾向于避免的事情之一，因为 IE 需要大量的兼容性问题。
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.
现在只是$('body').addClass('changed')和所有td的更新。
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 tdrule 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:
这假设有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 itself doesn't give you any special tools to access stylesheets, but it's possible there are plugins that might.
jQuery 本身并没有为您提供任何特殊的工具来访问样式表，但可能有插件可以。
回答by Michael Fitchett
$('head').append('<style id="customCSS">td { padding: 0.32em 2em }</style>');
I added an id attribute so you can target and remove it when you no longer want that change to apply.
我添加了一个 id 属性，这样当您不再希望应用该更改时，您可以定位并删除它。
$('#customCSS').remove();
回答by Nick Sotiros
I ran into a problem where I didn't know the width I wanted a class until it was loaded and did this.
我遇到了一个问题，在加载并执行此操作之前，我不知道我想要一个类的宽度。
<script>
$(function() {
calcWidth = CalculateWidth();
$('body').prepend('<style> .dynamicWidth { width: ' + calcWidth + 'px } </style>');
}
</script>
Note: it may matter where you put the script (prepend, append) depending on how you want the rules to 'cascade'.
注意：根据您希望规则“级联”的方式，放置脚本的位置（前置、附加）可能很重要。
回答by Nick Craver
Nope, it just doesn't work this way...not sure any better way to explain it than that :)
不，它只是不能这样工作......不确定有什么比这更好的解释方式:)
jQuery was designed to work on elements...if you're doing this for testing, Firebug of the Chrome console are options though.
jQuery 旨在处理元素...如果你这样做是为了测试，Chrome 控制台的 Firebug 是选项。
Something you coulddo, is have a server-side generated stylesheet, for example how ThemeRollerdoes it, and jQuery (or vanilla JS) dynamically adds that <link>into your header, something like:
您可以做的事情是拥有一个服务器端生成的样式表，例如ThemeRoller如何做到这一点，并且 jQuery（或 vanilla JS）将其动态添加<link>到您的标题中，例如：
<link rel="stylesheet" href="myCSS.php?tdPad=.32|2" type="text/css" />
If it was the last link, it'd override the previously defined style...in fact this is exactlyhow ThemeRoller works.
如果它是最后一个链接，它会覆盖之前定义的样式……事实上，这正是ThemeRoller 的工作方式。
