在使用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'"); 

http://fiddle.jshell.net/MDyxg/1/

如果你想完全通过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>正常。

希望能帮助那些被困在试图做同样事情的人。