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}')

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 内置的更好且更易于维护的方法时，通过将样式标签附加到 head 部分来使用 javascript 更改 CSS 是一个非常糟糕的主意> 或 jQuery 的 css() 版本。