jquery改变选中对象的css,使用jQuery选择和操作CSS伪元素，例如:: before和:: after

DIEA

您认为这将是一个简单的问题，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

.addRule().insertRule()今天相关的方法得到了很好的支持。作为一种变体，您还可以使用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颜色