如何使用 JavaScript 或 jQuery 動態變更 CSS 偽元素內容？

使用JavaScript 和jQuery 操作CSS 偽元素

動態修改CSS 偽元素內容的能力（例如：:: before, ::after ) 使用JavaScript 或jQuery 可以高度有用。

jQuery 解決方案

要使用jQuery 更改偽元素的內容，可以使用以下步驟：

1. 選擇偽元素所附加的元素。
2. 使用 :after 或 :before 選擇器來定位偽元素。
3. 將 content 屬性設定為所需的值。

例如，修改內容為'foo' 的::after 偽元素以顯示'bar' :

$('span').find(':after').text('bar');

原生JavaScript 解決方案

原生JavaScript，您可以使用window.getComputedStyle() 方法和附加到元素style 屬性的 ::after 或 ::before 選擇器來操作偽元素。

例如，實現與jQuery 相同的結果上面的範例：

document.querySelector('span').style['::after'].content = '"bar"';

使用資料的替代方法屬性

另一種方法是使用資料屬性來儲存所需的內容，然後使用jQuery 動態修改它。

例如，為span 元素加入資料屬性：

<span data-content="foo"></span>

然後，在jQuery 中，設定偽元素的attr() 來操作其content:

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

在CSS 中，定義偽元素，其內容來自data 屬性：

span:after {
  content: attr(data-content);
}

以上是如何使用 JavaScript 或 jQuery 動態變更 CSS 偽元素內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！