更改head标记中的CSS类

Question

我在头标签中添加了一个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}')

FIDDLE

修改

或者您可以在覆盖样式的地方下方插入新的样式标记：

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

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

FIDDLE

或者您可以只编辑内容并重新插入：

$("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);

FIDDLE

我的观点是，当javascript已经包含已经使用element.style或jQuery {{css()内置的更好和更易维护的方法时，通过将样式标签附加到head部分来更改CSS是一个非常糟糕的主意。 1}}版本。