如何使用 jQuery 修改 CSS :after 偽元素？

使用jQuery 操作偽元素：存取「:after」選擇器

修改CSS 偽元素，例如「:after」可以在jQuery中提出了挑戰。雖然直接更改其屬性是不可能的，但存在替代方法。

了解限制

":after" 元素不是標準 DOM 的一部分，導致它們無法存取通過 JavaScript。因此，嘗試使用以下選擇器修改樣式是行不通的。

$('.pageMenu .active:after').css(...)

使用動態類別的解決方法

一種解決方法是動態地將具有修改樣式的新類別新增至元素。例如：

CSS:

JS:

.pageMenu .active.changed:after { 
/* this selector is more specific, so it takes precedence over the other :after */
    border-top-width: 22px;
    border-left-width: 22px;
    border-right-width: 22px;
}

此方法新增方法，它用修改後的樣式覆蓋原始的「:after」樣式

$('.pageMenu .active').toggleClass('changed');

替代技術

除了動態類別解決方法之外，還有各種使用JavaScript 讀取或修改偽元素樣式的技術。請參閱：

「使用 jQuery 操作 CSS 偽元素（例如：:before 和 :after）」以獲得全面的指南。

以上是如何使用 jQuery 修改 CSS :after 偽元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！