我遇到了一个独特的情况，到目前为止我无法找到解决方案：动态地为 CSS 样式分配一个值。我知道如何使用 jQuery 为元素分配宽度、高度等，但我真正想做的是更改样式表中定义的值，以便可以将动态创建的值分配给多个元素。
我正在构建的是一个占据完整视口的图像幻灯片，在调整大小时重新计算图像的宽度、高度和左属性，以便图像始终居中，有利于宽度超过高度，除非视口高于它宽（调整大小不会重新加载页面，只会触发一个函数来调整图像大小）。
我已经成功地让它在一张图像上工作，现在我正在尝试确定将这些属性值分配给幻灯片中的所有图像的最佳方法，而不必为每个图像单独指定这三项内容。
可以动态修改类中的属性值吗？我确定答案就在那里，我可能只是在搜索中没有使用正确的术语。希望我在描述问题方面做得很好。TIA。
与这里的一些答案相反，使用 Javascript 编辑样式表本身不仅是可能的，而且性能更高。简单地执行$('.myclass').css('color: red')将最终遍历匹配选择器的每个项目并单独设置样式属性。这真的是低效的，如果你有数百个元素，就会导致问题。
更改项目的类是一个更好的主意，但您仍然会遇到同样的问题，因为您要更改 N 个项目的属性，这可能是一个很大的数字。更好的解决方案可能是更改单个父项或少量父项的类，然后使用 css 中的“级联”命中目标项。这适用于大多数情况，但不是全部。
有时您需要将很多项目的 CSS 更改为动态的东西，或者通过点击少数父母没有什么好方法可以做到这一点。更改样式表本身，或添加一个小的新样式来覆盖现有的 css，是一种非常有效的更改项目显示的方法。您只在一处与 DOM 交互，浏览器可以真正有效地处理部署这些更改。
jss是一个库，可以帮助更轻松地直接从 javascript 编辑样式表。
您可以使用以下功能：
function setStyle(cssText) {
var sheet = document.createElement('style');
sheet.type = 'text/css';
/* Optional */ window.customSheet = sheet;
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);
return (setStyle = function(cssText, node) {
if(!node || node.parentNode !== sheet)
return sheet.appendChild(document.createTextNode(cssText));
node.nodeValue = cssText;
return node;
})(cssText);
};
特点：
setStyle，因此如果您不调用它，它将不会创建任何样式表。setStyle例子
var myCSS = setStyle('*{ color:red; }');
setStyle('*{ color:blue; }', myCSS); // Replaces the previous CSS with this one
浏览器支持
至少，它适用于 IE9、FF3、Chrome 1、Safari 4、Opera 10.5。
还有一个IE 版本，可以在现代浏览器和旧版本的 IE 上运行！（适用于 IE8 和 IE7，但可能导致 IE6 崩溃）。
好问题。这里的很多答案都有一个与您所问的直接矛盾的解决方案
“我知道如何使用 jQuery 为元素分配宽度、高度等，但我真正想做的是更改样式表中定义的值，以便可以将动态创建的值分配给多个元素。
”
内联jQuery.css样式元素：它不会改变物理 CSS 规则！如果您想这样做，我建议您使用 vanilla JavaScript 解决方案：
document.styleSheets[0].cssRules[0].cssText = "\
#myID {
myRule: myValue;
myOtherRule: myOtherValue;
}";
这样，您将设置样式表 css 规则，而不是附加内联样式。
希望这可以帮助！
就像@benvie 所说的那样，更改样式表比使用 jQuery.css（它将遍历集合中的所有元素）更有效。每次调用函数时不要向头部添加新样式也很重要，因为它会造成内存泄漏和浏览器必须单独应用的数千条 CSS 规则。我会做这样的事情：
//Add the stylesheet once and store a cached jQuery object
var $style = $("<style type='text/css'>").appendTo('head');
function onResize() {
var css = "\
.someClass {\
left: "+leftVal+";\
width: "+widthVal+";\
height: "+heightVal+";\
}";
$style.html(css);
}
此解决方案将通过每次调整大小仅修改一次 DOM 来更改您的样式。请注意，为了有效的 js 缩小和压缩，您可能不想漂亮地打印 css，但为了清晰起见，我这样做了。
使用 jquery 在 中添加样式覆盖<head>：
$('<style>.someClass {color: red;} input::-webkit-outer-spin-button: {display: none;}</style>')
.appendTo('head');