Question

我正在使用一种常用技术从我的JavaScript / jQuery中创建<STYLE> - 就像这样

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

我这样做是为了控制某些对象如何缩放（例如强制DIV为正方形） - 并且它工作正常。

问题是如果重新调整窗口大小，我会重新运行代码 - 此时它会在现有标签之后插入一组新的<STYLE>标签（如果有人拖动拉伸/收缩窗口，它可以插入100个！！）

这个有用，我应该强调，因为CSS只读取最后的条目 - 但它看起来笨拙，讨厌，凌乱，不整洁和可怕（这使得在Firebug中阅读代码几乎不可能！）

问题是 - 我可以在插入旧标签之前删除旧标签 - 或者我应该强制重新调整整个页面的重新加载大小（如果是这样，那么如何 - 并且不会导致性能下降）？

更新：按照罗宾的回答，我创建了一个像这样的函数

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并将其删除？ E.g。

$('#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');
}

Answer 2

这根本不是一种常见的技术，你最好直接在元素上设置样式：

$('.tilewidth').css({
                     width:  tilesize+'px',
                     height: tilesize+'px'
                   });

这样，元素样式将在调整大小时更新，而不是添加一堆样式标记。

删除/替换动态创建的<style>标记（使用jQuery）</style>

2 个答案: