jquery - 更改 head 标签中的 CSS 类

Question

我在 head 标签中添加了一个 CSS 类，例如：

$("head").append("<style type='text/css'>.classname{color: gold}</style>");

现在我需要更改颜色属性，即从金色变为绿色。有什么解决方案吗？

注意：我需要在 head 标签中执行此操作。就像是

$('.classname').css('color','green');

不符合我的要求。谢谢。

Answer 1

给你的风格标签一个标识符，比如一个ID，你可以稍后引用它并将它的内容更改为你喜欢的任何内容，如果这不可能，你将不得不找出另一种选择它的方法，比如根据它的内容，索引头部等：

$("head").append("<style type='text/css' id='myStyle'>.classname {color: gold}</style>");​​

$("#myStyle").html('.classname {color: green}')

小提琴

编辑：

或者您可以在必须覆盖样式的标签下方插入一个新样式标签：

$("head").append("<style type='text/css'>.classname {color: gold; font-weight: bold}</style>");

$("head").append("<style type='text/css'>.classname {color: green}</style>");

小提琴

或者您可以只编辑内容并再次插入：

$("head").append("<style type='text/css' id='myStyle'>.classname {color: gold; font-weight: bold}</style>");

var css = $("#myStyle").text().replace('gold', 'green');
$("#myStyle").text(css);

小提琴

我的观点是，当 javascript 已经拥有更好且更易于维护的方法时，通过将样式标签附加到 head 部分来使用 javascript 更改 CSSelement.style或 jQuery 的css()版本。