jquery - 删除/替换动态创建的 <STYLE> 标签(使用 jQuery)

Question

我正在使用一种常用技术来创建 <STYLE>来 self 的 JavaScript/jQuery - 很像这样

$('<style>.tilewidth { width:' + tilesize + 'px; height: ' + tilesize + 'px;}</style>').appendTo('head');

我这样做是为了控制某些对象的缩放方式(例如强制 DIV s 为正方形)- 它工作正常。

问题是，如果重新调整窗口大小，我会重新运行代码 - 此时它会插入一组新的 <STYLE>现有标签之后的标签(如果有人拖动拉伸(stretch)/缩小窗口，它可能会插入 100s!!)

我应该强调，这是有效的，因为 CSS 只读取最后的条目 - 但它看起来笨拙、令人讨厌、凌乱、不整洁和可怕(这使得在 Firebug 中阅读代码几乎不可能!!)

问题是 - 我可以在插入新标签之前删除旧标签 - 还是我应该强制重新加载整个页面以重新调整大小(如果是这样，如何 - 这不会消耗性能吗)？

更新:根据 Robin 的回答，我创建了一个类似这样的函数

function addStyle(sname,scode) {
  scode = "." + sname + " {" + scode + "}";
  if ($("#style-" + sname).length)
    $("#style-" + sname).html(scode);
  else
    $("<style/>").attr("id","style-"+sname).html(scode).appendTo("head");
}

效果很好 - 谢谢! :)

Answer 1

给你的 style 标签一个 id 然后删除它？例如

$('#sizing').remove();
$('<style id="sizing">…</style>').appendTo('head');

实际上，再想一想，您最好只设置文本而不是一遍又一遍地创建一个元素。

var sizing = $('#sizing');
if (sizing.length) {
  sizing.text('my new styles');
} else {
  $('<style id="sizing">…</style>').appendTo('head');
}