在使用jQuery之后select和操作CSS伪元素，如:: before和::
有没有办法使用jQueryselect/操作CSS伪元素，如::before和::after （以及带有一个分号的旧版本）？
例如，我的样式表有以下规则：
.span::after{ content:'foo' }
我如何使用jQuery将“foo”更改为“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的解决scheme，如下所示：
在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'; }
你会认为这将是一个简单的问题来回答，jQuery可以做的一切。 不幸的是，这个问题归结为一个技术问题： css：after和之前：规则不是DOM的一部分，因此不能使用jQuery的DOM方法进行修改。
有一些方法可以使用JavaScript和/或CSS解决方法处理这些元素; 哪一个你使用取决于你的确切要求。
我将从广泛认为是“最好”的方法开始：
1）添加/删除预定的类
在这种方法中，您已经在CSS中创build了一个不同的: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"; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p>This is a paragraph.</p> <p>This is another paragraph.</p>
虽然它们是由浏览器通过CSS呈现的，就好像它们像其他真正的DOM元素一样，但伪元素本身并不是DOM的一部分，因此您无法直接使用jQuery（或任何 JavaScript API）来select和操作它们，甚至没有select器API ）。
但是，您总是可以find其他方法，例如：
-
将样式应用到一个或多个任意类的伪元素，然后使用jQuery在类之间切换（请参见seucolega的答案作为一个简单示例） – 这是使用简单select器的惯用方式（伪元素不是）来区分元素和元素状态，以及它们打算使用的方式
-
通过改变文档样式表来操纵应用于所述伪元素的样式，这更像是一种黑客行为
但是您仍然无法直接访问它们，因为最终它们只能在渲染引擎中看到，并且不能通过任何脚本API（除了可能的CSSOM，它不会被jQuery所公开的超出.css()元素而不是伪元素）。
这适用于您试图使用jQuery修改样式的任何伪元素，而不仅仅是:before和:after 。
你不能在jQuery中select伪元素，因为它们不是DOM的一部分。 但是你可以添加一个特定的类到父元素，并控制其在CSS中的伪元素。
例
在jQuery中：
<script type="text/javascript"> $('span').addClass('change'); </script>
在CSS中：
span.change:after { content: 'bar' }
根据基督徒的build议，你也可以这样做：
$('head').append("<style>.span::after{ content:'bar' }</style>");
这是访问的方式：之后和：风格属性之前，定义在CSS：
// Get the color value of .element:before var color = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('color'); // Get the content value of .element:before var content = window.getComputedStyle( document.querySelector('.element'), ':before' ).getPropertyValue('content');
我已经在这里回答了这个问题，但为了超级酷，我会为你重复一遍。
答案应该是“ 是”和“否” 。 你不能通过伪select器来select一个元素，但是你可以用JavaScript来为你的样式表添加一个新的规则。
我做了一些应该为你工作的东西：
var addRule = function(sheet, selector, styles) { if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); if (sheet.addRule) return sheet.addRule(selector, styles); }; addRule(document.styleSheets[0], "body:after", "content: 'foo'");
如果你想完全通过CSS操作sudo元素的:: before或者::你可以做到JS。 见下文;
jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');
注意<style>元素有一个ID，如果你的样式dynamic改变的话，你可以使用它来移除它并重新添加到它。
这样，在JS的帮助下，你的元素就是你想要的样式。
这里是HTML：
<div class="icon"> <span class="play"> ::before </span> </div>
“之前”的计算风格是content: "VERIFY TO WATCH";
这里是我的两行jQuery，它使用了添加一个额外的类来引用这个元素，然后附加一个样式标签（带一个！重要的标签）的想法来改变sudo元素的内容值的CSS：
$("span.play:eq(0)").addClass('G');
$('body').append("<style>.G:before{content:'NewText' !important}</style>");
一个工作但不是非常有效的方法是添加一个规则的文件与新的内容，并引用它与一个类。 取决于需要什么类可能需要一个唯一的ID为每个值的内容。
$("<style type='text/css'>span.id-after:after{content:bar;}</style>").appendTo($("head")); $('span').addClass('id-after');
谢谢你们！ 我设法做我想要的：D http://jsfiddle.net/Tfc9j/42/这里看一看;
我希望有一个外部div的不透明度不同于内部div的不透明度，并改变点击somwewhere;）谢谢！
$('#ena').on('click', function () { $('head').append("<style>#ena:before { opacity:0.3; }</style>"); }); $('#duop').on('click', function (e) { $('head').append("<style>#ena:before { opacity:0.8; }</style>"); e.stopPropagation(); }); #ena{ width:300px; height:300px; border:1px black solid; position:relative; } #duo{ opacity:1; position:absolute; top:50px; width:300px; height:100px; background-color:white; } #ena:before { content: attr(data-before); color: white; cursor: pointer; position: absolute; background-color:red; opacity:0.9; width:100%; height:100%; } <div id="ena"> <div id="duo"> <p>ena p</p> <p id="duop">duoyyyyyyyyyyyyyy p</p> </div> </div>
你可以创build一个假的属性或使用现有的属性，并在伪元素的样式表中inheritance它。
var switched = false; // Enable color switching setInterval(function () { var color = switched ? 'red' : 'darkred'; var element = document.getElementById('arrow'); element.style.backgroundColor = color; // Managing pseudo-element's css // using inheritance. element.style.borderLeftColor = color; switched = !switched; }, 1000);
.arrow { /* SET FICTIONAL PROPERTY */ border-left-color:red; background-color:red; width:1em; height:1em; display:inline-block; position:relative; } .arrow:after { border-top:1em solid transparent; border-right:1em solid transparent; border-bottom:1em solid transparent; border-left:1em solid transparent; /* INHERIT PROPERTY */ border-left-color:inherit; content:""; width:0; height:0; position:absolute; left:100%; top:-50%; }
<span id="arrow" class="arrow"></span>
这是不实际的，因为我没有写这个真实世界的用途，只是给你一个例子，可以实现什么。
css = { before: function(elem,attr){ if($("#cust_style") !== undefined){ $("body").append("<style> " + elem + ":before {" + attr + "} </style>"); } else { $("#cust_style").remove(); $("body").append("<style> " + elem + ":before {" + attr + "} </style>"); } }, after: function(elem,attr){ if($("#cust_style") !== undefined){ $("body").append("<style> " + elem + ":after {" + attr + "} </style>"); } else { $("#cust_style").remove(); $("body").append("<style> " + elem + ":after {" + attr + "} </style>"); } } }
这个当前添加了一个/或附加一个Style元素，其中包含您的必要属性，它将影响目标元素的伪元素之后。
这可以用作
css.after("someElement"," content: 'Test'; position: 'absolute'; ") // editing / adding styles to :after
和
css.before( ... ); // to affect the before pseudo element.
如之前和之前：伪元素不能通过DOM直接访问，目前不可能自由编辑css的特定值。
我的方式只是一个例子，它不适合练习，你可以修改它尝试一些你自己的技巧，并使其正确的使用现实世界。
所以做你自己的实验与这个和其他人！
问候 – Adarsh Hegde。
为什么添加类或属性，当你可以追加一个style头
$('head').append('<style>.span:after{ content:'changed content' }</style>')
这里有很多答案，但没有答案有助于操纵:before或:after的CSS，甚至没有被接受的答案。
这是我build议如何做的。 让我们假设你的HTML是这样的：
<div id="something">Test</div>
然后你在CSS中设置它，然后devise它：
#something:before{ content:"1st"; font-size:20px; color:red; } #something{ content:'1st'; }
请注意，我也在元素本身中设置了content属性，以便稍后可以轻松地将其取出。 现在有一个button点击它，你想改变颜色：之前为绿色，其字体大小为30px。 你可以做到这一点，如下所示：
在某些类上定义一个具有您所需样式的CSS .activeS ：
.activeS:before{ color:green !important; font-size:30px !important; }
现在你可以改变：在样式之前，通过添加类到你的：before元素，如下所示：
<button id="changeBefore">Change</button> <script> $('#changeBefore').click(function(){ $('#something').addClass('activeS'); }); </script>
如果您只想获取:before内容，可以这样做：
<button id="getContent">Get Content</button> <script> $('#getContent').click(function(){ console.log($('#something').css('content'));//will print '1st' }); </script>
最终如果你想dynamic地改变:before jQuery内容:before ，你可以做到这一点，如下所示：
<button id="changeBefore">Change</button> <script> var newValue = '22';//coming from somewhere var add = '<style>#something:before{content:"'+newValue+'"!important;}</style>'; $('#changeBefore').click(function(){ $('body').append(add); }); </script>
点击上面的“changeBefore”button将会改变:before #something内容到dynamic值“22” :before 。
我希望它有帮助
$('.span').attr('data-txt', 'foo'); $('.span').click(function () { $(this).attr('data-txt',"any other text"); })
.span{ } .span:after{ content: attr(data-txt); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class='span'></div>
你可以使用我的插件来达到这个目的。
JQuery的：
(function() { $.pseudoElements = { length: 0 }; var setPseudoElement = function(parameters) { if (typeof parameters.argument === 'object' || (parameters.argument !== undefined && parameters.property !== undefined)) { for (var element of parameters.elements.get()) { if (!element.pseudoElements) element.pseudoElements = { styleSheet: null, before: { index: null, properties: null }, after: { index: null, properties: null }, id: null }; var selector = (function() { if (element.pseudoElements.id !== null) { if (Number(element.getAttribute('data-pe--id')) !== element.pseudoElements.id) element.setAttribute('data-pe--id', element.pseudoElements.id); return '[data-pe--id="' + element.pseudoElements.id + '"]::' + parameters.pseudoElement; } else { var id = $.pseudoElements.length; $.pseudoElements.length++ element.pseudoElements.id = id; element.setAttribute('data-pe--id', id); return '[data-pe--id="' + id + '"]::' + parameters.pseudoElement; }; })(); if (!element.pseudoElements.styleSheet) { if (document.styleSheets[0]) { element.pseudoElements.styleSheet = document.styleSheets[0]; } else { var styleSheet = document.createElement('style'); document.head.appendChild(styleSheet); element.pseudoElements.styleSheet = styleSheet.sheet; }; }; if (element.pseudoElements[parameters.pseudoElement].properties && element.pseudoElements[parameters.pseudoElement].index) { element.pseudoElements.styleSheet.deleteRule(element.pseudoElements[parameters.pseudoElement].index); }; if (typeof parameters.argument === 'object') { parameters.argument = $.extend({}, parameters.argument); if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) { var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements[parameters.pseudoElement].index = newIndex; element.pseudoElements[parameters.pseudoElement].properties = parameters.argument; }; var properties = ''; for (var property in parameters.argument) { if (typeof parameters.argument[property] === 'function') element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property](); else element.pseudoElements[parameters.pseudoElement].properties[property] = parameters.argument[property]; }; for (var property in element.pseudoElements[parameters.pseudoElement].properties) { properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; '; }; element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index); } else if (parameters.argument !== undefined && parameters.property !== undefined) { if (!element.pseudoElements[parameters.pseudoElement].properties && !element.pseudoElements[parameters.pseudoElement].index) { var newIndex = element.pseudoElements.styleSheet.rules.length || element.pseudoElements.styleSheet.cssRules.length || element.pseudoElements.styleSheet.length; element.pseudoElements[parameters.pseudoElement].index = newIndex; element.pseudoElements[parameters.pseudoElement].properties = {}; }; if (typeof parameters.property === 'function') element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property(); else element.pseudoElements[parameters.pseudoElement].properties[parameters.argument] = parameters.property; var properties = ''; for (var property in element.pseudoElements[parameters.pseudoElement].properties) { properties += property + ': ' + element.pseudoElements[parameters.pseudoElement].properties[property] + ' !important; '; }; element.pseudoElements.styleSheet.addRule(selector, properties, element.pseudoElements[parameters.pseudoElement].index); }; }; return $(parameters.elements); } else if (parameters.argument !== undefined && parameters.property === undefined) { var element = $(parameters.elements).get(0); var windowStyle = window.getComputedStyle( element, '::' + parameters.pseudoElement ).getPropertyValue(parameters.argument); if (element.pseudoElements) { return $(parameters.elements).get(0).pseudoElements[parameters.pseudoElement].properties[parameters.argument] || windowStyle; } else { return windowStyle || null; }; } else { console.error('Invalid values!'); return false; }; }; $.fn.cssBefore = function(argument, property) { return setPseudoElement({ elements: this, pseudoElement: 'before', argument: argument, property: property }); }; $.fn.cssAfter = function(argument, property) { return setPseudoElement({ elements: this, pseudoElement: 'after', argument: argument, property: property }); }; })(); $(function() { $('.element').cssBefore('content', '"New before!"'); });
.element { width: 480px; margin: 0 auto; border: 2px solid red; } .element::before { content: 'Old before!'; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="element"></div>
其他人评论说，在头元素上添加一个完整样式的元素，如果你只做一次，那么这样做不错，但是如果你需要重新设置一次以上，你会得到大量的样式元素。 所以为了防止在头部用id创build一个空白样式元素并replace它的innerHTML，像这样：
<style id="pseudo"></style>
然后，JavaScript将如下所示：
var pseudo = document.getElementById("pseudo"); function setHeight() { let height = document.getElementById("container").clientHeight; pseudo.innerHTML = `.class:before { height: ${height}px; }` } setHeight()
现在在我的情况下，我需要这个来设置基于另一个高度的前一个元素的高度，它会改变resize，所以使用这个我可以运行setHeight()每次窗口的大小，它将取代<style>正常。
希望能帮助那些被困在试图做同样事情的人。
