使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

下面是访问:after和:before样式属性的方法，在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');

2014-07-15 21:55:01

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

有一些方法可以使用JavaScript和/或CSS工作区来操作这些元素;您使用哪一种取决于您的确切需求。

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

1)添加/删除一个预定的类

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

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

然后你可以很容易地添加或删除这个类使用jQuery(或香草JavaScript):

$('p').on('click', function() {
    $(this).toggleClass('special');
});

美元(“p”)。On('点击'，函数(){ (美元).toggleClass(特殊的); })； p:{之前内容:“foo”; 颜色:红色; 光标:指针; ｝ p.special:{之前内容:“酒吧”; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段

优点:易于实现与jQuery;快速改变多个风格在一次;强制分离关注点(从HTML中隔离CSS和JS) 缺点: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。特殊:在` `之前，` `内容:` ` + STR + ` ` ` ` ` `); p:{之前内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>

. addrule()和相关的. insertrule()方法目前得到了很好的支持。

作为一种变体，你也可以使用jQuery来添加一个全新的样式表到文档中，但必要的代码并不干净:

var str = "bar";
$('<style>p.special:before{content:"'+str+'"}</style>').appendTo('head');

Var STR = "bar"; $(' <时尚> p。特殊:{之前内容:“+ str +”}> < /风格”).appendTo(头); p:{之前内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>

如果我们谈论的是“操纵”值，而不仅仅是添加值，我们还可以使用不同的方法读取现有的: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。特殊:before'， 'content: "' +str +str + '";'); p:{之前内容:“foo”; 颜色:红色; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p class="special">这是一个段落</p> 这是另一段</p>

在使用jQuery时，我们可以将document.querySelector('p')替换为$('p')[0]，以获得稍短的代码。

优点:任何字符串都可以动态插入到样式中缺点:原始样式不会被改变，只是被覆盖;重复使用(ab)可以使DOM变得任意大

3)改变一个不同的DOM属性

您还可以在CSS中使用attr()来读取特定的DOM属性。(如果浏览器支持:before，它也支持attr())在一些精心准备的CSS中，通过将此与content:结合起来，我们可以动态地更改:before和:after的内容(但不能更改其他属性，如边距或颜色):

p:before {
    content: attr(data-before);
    color: red;
    cursor: pointer;
}

JS:

$('p').on('click', function () {
    $(this).attr('data-before','bar');
});

美元(“p”)。On('点击'，函数(){ (美元).attr(“数据”、“酒吧”); })； p:{之前内容:attr(数据); 颜色:红色; 光标:指针; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段

如果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('点击'，函数(){ (美元)。attr(“数据”,str); })； p:{之前内容:“foo”; 颜色:红色; 光标:指针; ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> <p>这是一个段落 <p>这是另一段

优点:不会创造出无尽的额外风格缺点:CSS中的attr只能应用于内容字符串，而不是url或RGB颜色

2014-02-11 18:14:29

你可以使用我的插件来实现这个目的。

JQuery:

应该指定值，就像在jQuery.css的普通函数中一样

此外，你还可以获得pseudo-element参数的值，就像在jQuery.css的普通函数中一样:

console.log( $(element).cssBefore(parameter) );

JS:

GitHub: https://github.com/yuri-spivak/managing-the-properties-of-pseudo-elements/

2017-07-31 18:19:08

下面是HTML:

<div class="icon">
  <span class="play">
    ::before
  </span>
</div>

“before”上的计算样式是内容:“VERIFY TO WATCH”;

下面是我的两行jQuery代码，它们使用了添加一个额外的类来特别引用这个元素，然后附加一个样式标签(带一个!important标签)来改变sudo元素内容值的CSS:

$（“span.play：eq（0）”）.addClass（'G'）;

$('体').append(“<时尚>。G:在{重要内容:“NewText”!}> < /风格”);

2014-03-18 23:27:20

您可以创建一个伪属性，也可以使用一个现有的属性，并在伪元素的样式表中继承它。

似乎它对“content”属性不起作用:(

2014-10-13 13:45:45

为什么要添加类或属性，当你可以添加一个样式头

$('head').append('<style>.span:after{ content:'changed content' }</style>')

2016-08-09 06:10:58

使用javascript(或jQuery)选择和操作CSS伪元素，如::before和::after

推荐文章

最新文章

标签