如何使用 jQuery 存取和修改 CSS 偽元素 (::before、::after) 的樣式屬性？

在jQuery 中存取偽元素的樣式屬性

本文深入探討了存取偽元素的樣式屬性的問題，例如::before和::after，使用jQuery。

在 CSS 中，偽元素用於修改元素的外觀，但不能直接使用 jQuery 選擇器作為目標。基本上，偽元素會在目標元素之前或之後插入內容，並且無法單獨設定樣式。

例如，如果您有以下 CSS 規則：

.example::before {
  content: "Added Text";
}

嘗試選擇使用 jQuery 的偽元素，如下所示：

$(".example::before").css("color", "red");

將無法運作。相反，您需要定位父元素並使用 :has() 選擇器來選擇具有特定偽元素的元素：

$(".example:has(::before)").css("color", "red");

或者，您可以使用 jQuery.cssRules()插件直接存取和修改CSS規則：

var rules = jQuery.cssRules();
for (var i = 0; i < rules.length; i++) {
  if (rules[i].selectorText === ".example::before") {
    rules[i].style.color = "red";
  }
}

但是，需要注意的是，這種方法受到瀏覽器支援和相容性的限制

總之，雖然不可能使用jQuery 選擇器直接選擇偽元素，但可以使用替代方法來存取和修改其樣式屬性。

以上是如何使用 jQuery 存取和修改 CSS 偽元素 (::before、::after) 的樣式屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！