使用JavaScript / jQuery即时修改CSS类属性值
我遇到了一个独特的情况，我到目前为止还找不到解决scheme：dynamic地为CSS样式赋值。 我知道如何使用jQuery将宽度，高度等分配给元素，但是我想要做的事情实际上是更改样式表中定义的值，以便dynamic创build的值可以分配给多个元素。
我build立的是一个幻灯片图像占据整个视口，重新计算图像的宽度，高度和左侧属性resize，使图像始终居中，有利于宽度高度，除非视口高于它是（resize不重新加载页面，只是触发一个函数来调整图像大小）。
我已经成功地将它在一个图像上工作，现在我试图确定将这些属性值分配给幻灯片中的所有图像的最佳方式，而不必为每个图像单独指定这三件事情。
我的问题：
在一个类中的属性的值可以在飞行中修改吗？ 我相信答案是在那里，我可能只是没有在我的search中使用正确的术语。 希望我做了很好的描述这个问题。 TIA。
与这里的一些答案相反，使用Javascript编辑样式表本身不仅可能，而且性能更高。 简单地做$('.myclass').css('color: red')将循环遍历与select器匹配的每个项目，并单独设置style属性。 这真的是效率低下，如果你有成百上千的元素，就会造成问题。
更改项目上的类是一个更好的主意，但你仍然遭受同样的问题，因为你正在改变N项的属性，这可能是一个很大的数字。 一个更好的解决办法可能是更改单个父项或less数父项的类，然后使用CSS中的“级联”命中目标项。 这适用于大多数情况，但不是全部。
有时候，你需要把很多项目的CSS改成dynamic的，或者有很less的父母来这样做，没有什么好办法。 更改样式表本身，或添加一个新的重写现有的CSS是一个非常有效的方式来改变项目的显示。 您只能在一个地方与DOM进行交互，而浏览器可以真正有效地处理这些更改。
jss是一个库，可以帮助您更轻松地直接从javascript编辑样式表。
演示 ， IE演示
你可以使用下面的函数：
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); };
特点 ：
- 这个函数是用vanilla-js编写的，所以它的性能比jQuery更好
- 一个样式表是在第一次调用
setStyle之后创build的，所以如果不调用它，它将不会创build任何样式表。 - 相同的样式表被重复用于
setStyle的以下调用 - 该函数返回一个引用到与你已经添加的一堆CSS相关联的节点。 如果再次使用该节点作为第二个参数调用该函数，它将用新的replace旧的CSS。
例
var myCSS = setStyle('*{ color:red; }'); setStyle('*{ color:blue; }', myCSS); // Replaces the previous CSS with this one
浏览器支持
至less，它适用于IE9，FF3，Chrome 1，Safari 4，Opera 10.5。
还有一个IE版本 ，适用于现代浏览器和旧版本的IE！ （适用于IE8和IE7，但可以使IE6崩溃）。
很好的问题。 这里的很多答案都有一个直接与你所问的矛盾的解决scheme
“我知道如何使用jQuery为元素分配宽度，高度等，但是我想要做的是实际上改变样式表中定义的值，以便dynamic创build的值可以分配给多个元素。
“
内联 jQuery .css样式元素：它不会更改物理CSS规则！ 如果你想这样做，我会build议使用一个香草的JavaScript解决scheme：
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); }
此解决scheme将通过每次resize修改DOM一次来更改样式。 请注意，为了有效的js缩小和压缩，你可能不希望漂亮的打印CSS，但我做了清晰。
使用jquery在<head>添加样式覆盖：
$('<style>.someClass {color: red;} input::-webkit-outer-spin-button: {display: none;}</style>') .appendTo('head');
我有一个解决scheme，在特定的CSS类中更改值。 但它只有在你的CSS保持标签的情况下才有效。 如果你只是从外部文件ex链接到你的css。
<style src='script.js'></style>
这个解决scheme不会工作。
如果你的CSS看起来像这样的例子：
<style id='style'> .foo { height:50px; } </style>
你可以使用JS / jQuery来改变标签的值。
我写了一个函数，也许它不是最好的，但它的工作原理。 如果你愿意，你可以改进它。
function replaceClassProp(cl,prop,val){ if(!cl || !prop || !val){console.error('Wrong function arguments');return false;} // Select style tag value var tag = '#style'; var style = $(tag).text(); var str = style; // Find the class you want to change var n = str.indexOf('.'+cl); str = str.substr(n,str.length); n = str.indexOf('}'); str = str.substr(0,n+1); var before = str; // Find specific property n = str.indexOf(prop); str = str.substr(n,str.length); n = str.indexOf(';'); str = str.substr(0,n+1); // Replace the property with values you selected var after = before.replace(str,prop+':'+val+';'); style=style.replace(before,after); // Submit changes $(tag).text(style); }
然后，只需将标记variables更改为您的样式标记ID和exegute：
replaceClassProp('foo','height','50px');
这和$（'。foo'）.css（'height'，'50px'）; 是当你用jQuery的css方法做的时候，所有具有.foo类的元素都将在DOM中具有可见的style ='height：50px'。 如果你这样做，元素是不变的，你唯一能看到的是class ='foo'
优点
- 清除DOM
- 您可以在不更换整个样式的情况下修改所需的属性
缺点
- 只有内部的CSS
- 你必须find你想编辑的特定样式标签
希望它有助于无论如何。
您不能即时修改CSS类的成员。 但是，您可以在新的css类实现中在页面上引入一个新的<style>标记，然后closures该类。 例：
Sample.css .someClass { border: 1px solid black; font-size: 20px; }
你想完全改变这个类，所以你创build一个新的样式元素：
<style> .someClassReplacement { border: 1px solid white; font-size: 14px; } </style>
然后你通过jQuery做一个简单的replace：
$('.someClass').removeClass('someClass').addClass('someClassReplacement');
为什么不使用.classselect器来修改该类中每个对象的属性？
即：
$('.myclass').css('color: red;');
你应该真的重新考虑你对这个问题的方法。 使用精心devise的select器并附加类可能是这种方法更有说服力的解决scheme。 据我所知，你不能修改外部的CSS。
YUI 2和3有一个模块样式表，可以让你做到这一点（用javascript编辑样式表）。 http://yuilibrary.com/yui/docs/stylesheet/ 。 所以我认为这是可能的。 这与$（“。some”）。css（{…}）不一样，但是真正改变/添加/删除样式表中的样式定义，就像用户所要求的一样。
好吧..有同样的问题，并修复它，但解决scheme可能不适合每个人。
如果您知道要删除的样式表和规则的索引，请尝试像document.styleSheets[1].deleteRule(0); 。
从一开始，我有我的main.css （索引0）文件。 然后，我创build了一个新的文件， js_edit.css （index 1），它只包含一个规则，当页面加载完成后（在一堆其他的JS函数之后），我想删除这个规则。
现在，因为js_edit.css在main.css之后加载，所以只需要在js_edit.css中插入/删除规则，它们就会覆盖main.css中的规则 。
var x = document.styleSheets[1]; x.insertRule("p { font-size: 2rem; }", x.cssRules.length);
x.cssRules.length返回第二个（索引1）样式表中的规则数量，从而在最后插入新规则。
我相信你可以使用一堆for循环来search你想要修改的规则/属性，然后在同一张表中重写整个规则，但是我发现这样可以更简单地满足我的需求。
讨论的时间可能迟了，但是我需要的是类似于这里讨论的内容，但没有find真正做我想做的事情，而且很容易做到的事情。 我所需要的是隐藏和显示大量元素，而不是明确地访问每个元素，以某种方式更新它们，从而将显示样式更改为隐藏。 所以我想出了以下几点：
<style> /* The bulk of the css rules should go here or in an external css file */ /* None of these rules will be changed, but may be overridden */ .aclass { display: inline-block; width: 50px; height: 30px; } </style> <style id="style"> /* Only the rules to be changed should go in this style */ .bclass { display: inline-block; } </style> <script> // // This is a helper function that returns the named style as an object. // This could also be done in other ways. // function setStyle() { return document.getElementById( 'style' ); } </script> <div id="d1" class="aclass" style="background-color: green;"> Hi </div> <!-- The element to be shown and hidden --> <div id="d2" class="aclass bclass" style="background-color: yellow;"> there </div> <div id="d3" class="aclass" style="background-color: lightblue;"> sailor </div> <hr /> <!-- These buttons demonstrate hiding and showing the d3 dive element --> <button onclick="setStyle().innerHTML = '.bclass { display: none; }';"> Hide </button> <button onclick="setStyle().innerHTML = '.bclass { display: inline-block; }';"> Show </button>
通过在embedded和命名的样式表中切换bclass规则，在这种情况下，我们可以在一个地方更新display css规则，并使其覆盖aclass规则，它也有它自己的显示规则。
这种技术的好处在于它非常简单，实际上只需要一行代码就可以完成实际的工作，它不需要任何库，比如JQuery或插件，以及更新所有更改位置的实际工作应用是由浏览器的css核心function执行，而不是在JavaScript中执行。 此外，它还适用于IE 9及以上版本，Chrome，Safari，Opera以及MicroSoft Edge可以模拟的桌面和平板电脑/手机设备的所有其他浏览器。
function changeStyle(findSelector, newRules) { // Change original css style declaration. for ( s in document.styleSheets ) { var CssRulesStyle = document.styleSheets[s].cssRules; for ( x in CssRulesStyle ) { if ( CssRulesStyle[x].selectorText == findSelector) { for ( cssprop in newRules ) { CssRulesStyle[x].style[cssprop] = newRules[cssprop]; } return true; } } } return false; } changeStyle('#exact .myStyle .declaration', {'width':'200px', 'height':'400px', 'color':'#F00'});
