如何使用 jQuery 動態修改 :before 選擇器的 CSS 寬度屬性？

使用jQuery 動態修改:before 選擇器的CSS 寬度屬性

雖然不能直接修改:before CSS 選擇器的寬度屬性使用 CSSjQuery ，存在一種解決方法。透過動態添加新的樣式元素到文件的頭部，就可以達到預期的效果。其實作方式如下：

$('head').append('<style>.column:before{width:800px !important;}</style>');

此程式碼將一個新的樣式元素附加到文件的頭部。此元素中的 CSS 規則僅針對 .column 類別中的 :before 選擇器，將 width 屬性設為 800px 並覆寫任何現有的寬度設定。

範例與示範

考慮下列CSS 法則：

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

要動態修改.column 類別元素的:before 的width 屬性，請新增以下JavaScript 程式碼：

$(function() {
    $('head').append('<style>.column:before{width:800px !important;}</style>');
});

這將確保只有.column 元素中的:before 選擇器的寬度會被修改。此解決方案的現場演示可在[此處](DEMO_URL)。

替代外掛程式

雖然上述方法是一個簡單的解決方案，但您也可以探索外部外掛程式提供對偽類規則的直接存取。但是，建議在實際環境中使用此類插件之前對其進行研究和測試。

以上是如何使用 jQuery 動態修改 :before 選擇器的 CSS 寬度屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！