拆卸/更換動態創建<STYLE>標籤（使用jQuery）

我使用的常用技術，從我的JavaScript/jQuery的內創造<STYLE>秒 - 喜歡這個拆卸/更換動態創建<STYLE>標籤（使用jQuery）

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

我這樣做是爲了控制如何某些對象縮放（例如，強制DIV爲正方形） - 並且它工作正常。

問題是我重新運行該代碼，如果這個窗口將重新大小 - 此時它在現有的後插入一組新的<STYLE>標籤（如果有人拖拉伸/縮小窗口它可以插入100S !!）

這工作，我要強調，因爲CSS只讀取最後一個項目 - 但似乎笨拙和骯髒和雜亂無規律可循且可怕的（它使幾乎不可能螢火蟲讀碼!!）

問題是 - 可以在插入新標籤之前，我刪除了舊標籤 - 或者我應該只是強制重新裝入一個完整的頁面（如果是這樣，怎麼樣 - 也不會是性能消耗）？

更新：根據羅賓的答案，我創建了一個功能，像這樣

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"); 
}

這工作得很好 - 謝謝！ :)

來源

2012-08-12 shrewdlogarithm

給你的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'); 
}

來源

2012-08-12 11:31:22

不錯的主意 - 我將它改編成了一個簡單生活的函數（請參閱編輯問題） – shrewdlogarithm 2012-08-12 12:00:36

這確實is'nt的常用技術可言，你會只是直接設置樣式上的元素更好：

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

這樣的元素的樣式將在調整大小更新而不是添加一堆樣式標籤。

來源

2012-08-12 11:58:21 adeneo

那麼如何在文檔中有20多個元素使用相同樣式呢？ :) – shrewdlogarithm 2012-08-12 12:00:05

如果他們有相同的風格將被應用的課程，它們並不重要。只要你正確定位了jQuery的'css（）'函數，就可以用於數百萬個元素。 – adeneo 2012-08-12 12:04:11

對我來說這是一個誤導性的方法 - 它濫用類的想法... 你不是說「Set Class」tilewidth「有一個寬度的tilewidthpx - 你說的是」設置所有元素與一個「寬度」類具有這個寬度。該類實際上只是一個標籤 - 而不是具有實際內容的東西 - 它是解決問題的後退方式。但它會工作 - 當然 – shrewdlogarithm 2012-08-13 19:53:32

拆卸/更換動態創建<STYLE>標籤（使用jQuery）

回答

相關問題