jquery before不显示html,使用jQuery选择和操作CSS伪元素，例如:: before和:: after

您认为这将是一个简单的问题，jQuery可以做的其他事情。不幸的是，问题归结为一个技术问题：css：after和：之前规则不是DOM的一部分，因此不能使用jQuery的DOM方法进行更改。

有一些方法可以使用JavaScript和/或CSS解决方法来操纵这些元素; 您使用哪一个取决于您的确切要求。

我将从广泛认为的“最佳”方法开始：

1)添加/删除预定的类

在这种方法中，您已经在CSS中创建了一个具有不同:after或:before样式的类。稍后将此“新”类放在样式表中以确保它覆盖：p:before {

content: "foo";}p.special:before {

content: "bar";}

然后，您可以使用jQuery(或vanilla JavaScript)轻松添加或删除此类：$('p').on('click', function() {

$(this).toggleClass('special');});

$('p').on('click', function() {

$(this).toggleClass('special');

});

p:before {

content: "foo";

color: red;

cursor: pointer;

}

p.special:before {

content: "bar";

}

This is a paragraph.

This is another paragraph.

优点：易于使用jQuery实现; 快速改变多种风格; 强制分离关注点(将CSS和JS与HTML隔离)

缺点： CSS必须预先编写，因此内容:before或:after不完全是动态的

2)将新样式直接添加到文档的样式表中

它可以使用JavaScript来直接添加样式文档样式，包括:after和:before风格。jQuery没有提供方便的快捷方式，但幸运的是JS并不复杂：var str = "bar";document.styleSheets[0].addRule('p.special:before','content: "'+str+'";');

var str = "bar";

document.styleSheets[0].addRule('p.special:before', 'content: "' + str + '";');

p:before {

content: "foo";

color: red;

}

This is a paragraph

This is another paragraph

作为一种变体，您还可以使用jQuery在文档中添加一个全新的样式表，但必要的代码不是更清晰：var str = "bar";$('').appendTo('head');

var str = "bar";

$('').appendTo('head');

p:before {

content: "foo";

color: red;

}

This is a paragraph

This is another paragraph

如果我们谈论的是“操纵”这些值，而不仅仅是添加它们，我们还可以:after:before使用不同的方法来阅读现有的或样式：var str = window.getComputedStyle(document.querySelector('p'), ':before')

.getPropertyValue('content');

var str = window.getComputedStyle($('p')[0], ':before').getPropertyValue('content');

console.log(str);

document.styleSheets[0].addRule('p.special:before', 'content: "' + str+str + '";');

p:before {

content:"foo";

color: red;

}

This is a paragraph

This is another paragraph

我们可以更换document.querySelector('p')与$('p')[0]使用jQuery时，为略短代码。优点：任何字符串都可以动态插入到样式中

缺点：原始样式不会改变，只是被覆盖; 重复(ab)使用可以使DOM长得任意大

3)改变不同的DOM属性

您还可以在CSS中使用attr()以读取特定的DOM属性。(如果浏览器支持:before，它支持attr()为好。)通过这种结合content:在一些精心准备的CSS，我们可以改变的内容(而不是其他属性，像保证金或颜色):before和:after动态：p:before {

content: attr(data-before);

color: red;

cursor: pointer;}

JS：$('p').on('click', function () {

$(this).attr('data-before','bar');});

$('p').on('click', function () {

$(this).attr('data-before','bar');

});

p:before {

content: attr(data-before);

color: red;

cursor: pointer;

}

This is a paragraph.

This is another paragraph.

如果无法提前准备CSS，则可以将其与第二种技术结合使用：

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before);');

$('p').on('click', function () {

$(this).attr('data-before', str);

});

var str = "bar";

document.styleSheets[0].addRule('p:before', 'content: attr(data-before) !important;');

$('p').on('click', function() {

$(this).attr('data-before', str);

});

p:before {

content: "foo";

color: red;

cursor: pointer;

}

This is a paragraph.

This is another paragraph.

优点：不会创造无穷无尽的风格

缺点： attr在CSS中只能应用于内容字符串，而不是URL或RGB颜色