如何使用 jQuery 建立和重複使用動態 CSS 規則？

使用 jQuery 建立動態 CSS 規則和可重用性

使用 CSS 時，在 CSS 檔案中定義靜態規則通常很方便。然而，在某些情況下，您可能希望在運行時動態添加 CSS 資訊。本文探討如何使用 jQuery 建立可重複使用的 CSS 規則，因此無需多次新增特定 DOM 元素。

在運行時建立CSS 規則

建立使用jQuery 動態地使用CSS 規則，您可以採取以下步驟：

1. 建立一個使用HTML標記的樣式元素：

   <style type="text/css"></style>

2. 在樣式元素內定義 CSS規則：

   .redbold {
    color: #f00;
    font-weight: bold;
   }

3. 將樣式元素附加到該文件的head:

   $("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head");

重用建立的規則

建立CSS規則後，您可以透過應用適當的類別來重複使用它轉為HTML elements:

<div class="redbold">SOME NEW TEXT</div>

$("<div/>").addClass("redbold").text("SOME NEW TEXT").appendTo("body");

相容性

這種建立和重複使用CSS規則的方法已經過測試並確認可以在Opera 10、Firefox 等瀏覽器中使用3.5、Internet Explorer 8 和Internet Explorer 6。

以上是如何使用 jQuery 建立和重複使用動態 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！