JavaScript 和 jQuery 可以操作 CSS 偽元素，例如 ::before 和 ::after 嗎？

使用JavaScript 和jQuery 選擇和操作CSS 偽元素

CSS 偽元素可以像::before 和::after （兩者都可以）舊版和新版本）可以使用jQuery 選擇和操作嗎？

使用jQuery 的.css() 方法

假設樣式表中存在以下CSS 規則：

.span::after { content: 'foo'; }

要使用vanilla JavaScriptjQuery將'foo' 改為'bar'，您可以使用.css() 方法。

原版JavaScript:

const element = document.querySelector('.span');
element.style.content = 'bar';

jQuery:

$('.span').css('content', 'bar');

使用資料屬性

另一種方法涉及傳遞使用資料屬性將內容新增至偽元素並使用jQuery。

在HTML 中：

<span>foo</span>

在jQuery 中：

$('span').hover(function() {
  $(this).attr('data-content', 'bar');
});

span:after {
  content: attr(data-content) ' any other text you may want';
}

為了防止為了防止其他文本，seucolega 的解決方案可以與此方法結合使用。

在 HTML 中：

<span>foo</span>

在 jQuery 中：

$('span').hover(function() {
  $(this).addClass('change').attr('data-content', 'bar');
});

在CSS：

span.change:after {
  content: attr(data-content) ' any other text you may want';
}

這些方法提供了使用 JavaScript 或 jQuery 選擇和修改 CSS 偽元素內容的靈活性。

以上是JavaScript 和 jQuery 可以操作 CSS 偽元素，例如 ::before 和 ::after 嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！