使用 jQuery 更改 CSS 类属性
Posted
技术标签:
【中文标题】使用 jQuery 更改 CSS 类属性【英文标题】：Change CSS class properties with jQuery 【发布时间】：2012-07-13 12:53:21 【问题描述】：有没有办法使用 jQuery 更改 CSS 类的属性，而不是元素属性？
这是一个实际的例子：
我有一个类为red的div
.red background: red;
我想更改类 red 背景属性，而不是分配了类 red 背景的元素。
如果我使用 jQuery .css() method:
$('.red').css('background','green');
它将影响现在具有类red 的元素。到这里一切都很好。
但是，如果我进行 Ajax 调用，并插入更多具有 red 类的 div，它们将不会有绿色背景，它们将具有初始 red 背景。
我可以再次调用 jQuery .css() method。但我想知道是否有办法改变班级本身。请认为这只是一个基本示例。
【问题讨论】：
我不相信你可以用 jQuery 改变实际的类。 我同意 Andrew Peacock，我不知道加载后无法修改实际的 css。但是，在更改元素类之后执行更新（将背景从红色更改为绿色）似乎微不足道。 您或许能够操纵<style> 元素。见CSSStyleSheet.deleteRule和CSSStyleSheet.insertRule
另一个用例，实际上是把我带到这里的那个，是根据视口调整弹出窗口（实际上是一系列DIV）的大小，不使用JS，只需分配某个类然后更改类定义。
【参考方案1】：
您不能直接使用 jQuery 更改 CSS 属性。但是你至少可以通过两种方式达到同样的效果。
从文件中动态加载 CSS
function updateStyleSheet(filename)
newstylesheet = "style_" + filename + ".css";
if ($("#dynamic_css").length == 0)
$("head").append("<link>")
css = $("head").children(":last");
css.attr(
id: "dynamic_css",
rel: "stylesheet",
type: "text/css",
href: newstylesheet
);
else
$("#dynamic_css").attr("href",newstylesheet);
上面的例子复制自：
How To Switch CSS Files On-The-Fly Using jQuery动态添加样式元素
$("head").append('<style type="text/css"></style>');
var newStyleElement = $("head").children(':last');
newStyleElement.html('.redbackground:green;');
示例代码复制自 this JSFiddle fiddle，最初由 Alvaro in their comment 引用。
【讨论】：
甚至更短：$("head").append('');稍后在代码中： $('#style_changer').html('.redbackground:green;'); 这个解决方案“动态添加样式元素”对我来说是完美的。谢谢！并且@Tertium 升级更好。 第二部分的一个衬里：$("head").append('<style type="text/css">.redbackground:green;</style>'); 谢谢，@Tertium【参考方案2】：
如果您无法通过动态加载来使用不同的样式表，您可以使用此功能来修改 CSS 类。希望对你有帮助...
function changeCss(className, classValue)
// we need invisible container to store additional css definitions
var cssMainContainer = $('#css-modifier-container');
if (cssMainContainer.length == 0)
var cssMainContainer = $('<div id="css-modifier-container"></div>');
cssMainContainer.hide();
cssMainContainer.appendTo($('body'));
// and we need one div for each class
classContainer = cssMainContainer.find('div[data-class="' + className + '"]');
if (classContainer.length == 0)
classContainer = $('<div data-class="' + className + '"></div>');
classContainer.appendTo(cssMainContainer);
// append additional style
classContainer.html('<style>' + className + ' ' + classValue + '</style>');
此函数将采用任何类名并将任何先前设置的值替换为新值。请注意，您可以通过将以下内容传递给 classValue 来添加多个值："background: blue; color:yellow"。
【讨论】：
其实很聪明！您应该将代码包含在您的答案中并删除链接；） 是的，请包含实际代码，而不是链接（这可能会破坏并使此答案无用）。 好的，抱歉链接:) 如果您不是自己编写此代码，那么链接到原始源（而且很多都是正确的）没有任何问题。 谢谢！优秀作品。我的 IDE 语法高亮显示的 2 个小细节： 1. 从var cssMainContainer = $('<div id="css-modifier-container"></div>'); 中删除 var 2. 将 var 添加到：classContainer = cssMainContainer.find('div[data-class="' + className + '"]');【参考方案3】：
没有找到我想要的答案，所以我自己解决了：修改一个容器div！
<div class="rotation"> <!-- Set the container div's css -->
<div class="content" id='content-1'>This div gets scaled on hover</div>
</div>
<!-- Since there is no parent here the transform doesnt have specificity! -->
<div class="rotation content" id='content-2'>This div does not</div>
你想在执行 $target.css() 后保留的 css
.content:hover
transform: scale(1.5);
使用 css() 修改内容所在的 div
$(".rotation").css("transform", "rotate(" + degrees + "deg)");
Codepen example
【讨论】：
这在非常大的 DOM 上表现如何？似乎任何 jQuery 选择器都需要很长时间，因为它必须筛选大型 DOM...【参考方案4】：您可以动态删除类和添加类
$(document).ready(function()
$('#div').removeClass('left').addClass('right');
);
【讨论】：
【参考方案5】：$(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
styleSheetIndex 是与您在<head> 中加载文件的顺序相对应的索引值（例如，0 是第一个文件，1 是下一个文件，等等。如果只有一个 CSS 文件，则使用 0） .
rule 是文本字符串 CSS 规则。像这样："body display:none; "。
lineIndex 是该文件中的行号。要获取最后一个行号，请使用$(document)[0].styleSheets[styleSheetIndex].cssRules.length。只是 console.log 那个 styleSheet 对象，它有一些有趣的属性/方法。
因为 CSS 是“级联”，所以无论您尝试为该选择器插入什么规则，您都可以附加到 CSS 文件的底部，它会覆盖在页面加载时设置的任何样式。
在某些浏览器中，在处理完 CSS 文件后，您必须通过在 DOM JS 中调用一些无意义的方法来强制 CSS“重绘”，例如 document.offsetHeight（它被抽象为 DOM 属性，而不是方法，所以不要使用“()”)——在你的 CSSOM 操作之后简单地添加它会强制页面在旧浏览器中重绘。
所以这里有一个例子：
var stylesheet = $(document)[0].styleSheets[0];
stylesheet.insertRule('body display:none; ', stylesheet.cssRules.length);
【讨论】：
嗨！一个很小的 -1，因为我没有看到使用$(document)[0] 代替 document 的意义。
@PierreAntoineGuillaume 嗨。 document 被包裹在 jQuery/$ 对象中，因为提出问题的人指定了如何使用 jQuery 进行操作。 $(element) 与 element 不同 - jQuery 将包装元素转换为可以访问 jQuery 方法的 set 元素。 $(element)[0] 等价于 $(element).get(0)。这在learn.jquery.com/using-jquery-core/jquery-objectHappy moderating 有更详细的解释...
我不知道，这很有趣。如果你不编辑，我不能删除减号，这有点糟糕
"jQuery 还有一个名为 .get() 的方法，它提供了一个相关的功能。它不是返回一个 jQuery 包装的 DOM 元素，而是返回 DOM 元素本身。或者，因为 jQuery 对象是 "类似数组，“它支持通过方括号进行数组下标：无论哪种情况，firstHeadingElem 都包含本机 DOM 元素。”，所以确实没有意义在 $(document)[0].styleSheets[styleSheetIndex].insertRule(rule, lineIndex); 上做 document.styleSheets[styleSheetIndex].insertRule(rule, lineIndex);
我想添加我发现这是获取特定样式表的最简单方法$(`link[href="style.css"]`).prop("sheet"); 它总是会返回您要编辑的确切样式表，如 href/url理想情况下，在网页中始终是唯一的编辑：尽管只有使用 <link>【参考方案6】：
您可以向红色 div 的父级添加一个类，例如绿色风格
$('.red').parent().addClass('green-style');
然后给css添加样式
.green-style .red
background:green;
所以每次在绿色样式下添加红色元素，背景都会变成绿色
【讨论】：
【参考方案7】：这是对 Mathew Wolf 提供的出色答案的一些改进。 这个将主容器作为样式标记附加到 head 元素，并将每个新类附加到该样式标记。简洁一点，我觉得效果很好。
function changeCss(className, classValue)
var cssMainContainer = $('#css-modifier-container');
if (cssMainContainer.length == 0)
var cssMainContainer = $('<style id="css-modifier-container"></style>');
cssMainContainer.appendTo($('head'));
cssMainContainer.append(className + " " + classValue + "\n");
【讨论】：
据我所知，与this answer 不同，您只是附加而不是替换值...【参考方案8】：您可能希望采用不同的方法：与其动态更改 CSS，不如在 CSS 中以您想要的方式预定义样式。然后使用 JQuery 在 javascript 中添加和删除样式。 （参见 Ajmal 的代码）
【讨论】：
以上是关于使用 jQuery 更改 CSS 类属性的主要内容，如果未能解决你的问题，请参考以下文章