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

使用 JavaScript 和 jQuery 选择和操作 CSS 伪元素

CSS 伪元素可以像 ::before 和 ::after （两者都可以）旧版本和新版本）可以使用 jQuery 选择和操作吗？

使用jQuery 的 .css() 方法

假设样式表中存在以下 CSS 规则：

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

要使用 vanilla JavaScript 或 jQuery 将 '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');
});

在 CSS 中：

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中文网其他相关文章！