使用JavaScript / jQuery快速修改CSS类属性值

Question

到目前为止，我遇到了一种独特的情况，我一直无法找到解决方案：将值动态分配给CSS样式。我知道如何使用jQuery为元素分配宽度，高度等，但是我实际上想做的是更改样式表中定义的值，以便可以将动态创建的值分配给多个元素。我要构建的是一张图像的幻灯片显示，该图像占据了整个视口，重新计算了图像的宽度，高度和调整大小时的left属性，以便图像始终居中，偏爱宽度胜于高度，除非视口比它高宽（调整大小不会重新加载页面，只会触发调整图像大小的功能）。我已经成功地使它能够在一张图像上工作，现在我正在尝试确定将那些属性值分配给幻灯片中的所有图像的最佳方法，而不必为每个图像分别指定这三件事。我的问题：是否可以即时修改类中属性的值？我确信答案就在那里，我可能只是在搜索中没有使用正确的术语。希望我能很好地描述问题。TIA。

Answer 1

与这里的某些答案相反，使用Javascript编辑样式表本身不仅可行，而且性能更高。简单地这样做$('.myclass').css('color: red')最终将遍历匹配选择器的每个项目，并分别设置style属性。这确实效率不高，如果您有数百个元素，它将引起问题。

更改项目的类是一个更好的主意，但是您仍然遇到相同的问题，因为您要更改N个项目的属性，该属性可能很大。更好的解决方案可能是更改单个父项或少数父项上的类，然后使用css中的“层叠”命中目标项。这适用于大多数情况，但不是全部。

有时，您需要将很多项目的CSS更改为动态的，或者没有办法通过击中少数父母来实现。更改样式表本身，或添加一个小的新样式表以覆盖现有的CSS，是更改项目显示的一种非常有效的方法。您只需要与DOM进行一次交互，浏览器就可以真正有效地处理那些更改。

jss是一个库，可帮助简化从javascript直接编辑样式表的过程。

Answer 2

您可以使用以下功能：

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，因此，如果您不调用它，则不会创建任何样式表。

相同的样式表可重复用于以下的 setStyle

该函数返回对与您添加的CSS束关联的节点的引用。如果使用该节点作为第二个参数再次调用该函数，它将用新的CSS替换旧的CSS。

例

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崩溃）。

Answer 3

好问题。这里的很多答案都提供了一个与您的要求直接矛盾的解决方案

“我知道如何使用jQuery为元素分配宽度，高度等，但是我实际上想做的是更改样式表中定义的值，以便可以将动态创建的值分配给多个元素。

”

内联 jQuery .css样式元素：它不会改变CSS的物理规则！如果您想这样做，我建议您使用普通的JavaScript解决方案：

document.styleSheets[0].cssRules[0].cssText = "\

     #myID {

         myRule: myValue;

         myOtherRule: myOtherValue;

     }";

这样，您将设置样式表css规则，而不附加内联样式。

希望这可以帮助！