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

有什么方法来选择/操作CSS伪元素，如::before和::after(和旧版本的一个分号)使用jQuery?

例如，我的样式表有以下规则:

.span::after{ content:'foo' }

我怎么能改变'foo'到'酒吧'使用香草JS或jQuery?

当前回答

我总是添加我自己的utils函数，就像这样。

function setPseudoElContent(selector, value) {    
    document.styleSheets[0].addRule(selector, 'content: "' + value + '";');
}

setPseudoElContent('.class::after', 'Hello World!');

或使用ES6功能:

const setPseudoElContent = (selector, value) => {    
    document.styleSheets[0].addRule(selector, `content: "${value}";`);
}

setPseudoElContent('.class::after', 'Hello World!');

2018-09-13 09:56:03

其他回答

下面是访问: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

你也可以将内容传递给带有data属性的伪元素，然后使用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的解决方案结合起来，如下所示:

在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';
}

2011-04-20 17:59:04

只需要在之前或之后设置伪样式来继承，然后用javascript设置父样式。

例如，我想改变:before的颜色样式，然后我设置:

.my-style::before{
color: inherit;
}

然后我用javascript改变了.my-style元素的颜色样式:

document.querySelector(".my-style").style.color = red;

工作完成了，超级简单

2021-10-05 14:13:33

这是我第一次在给出我自己的答案之前没有阅读所有给出的答案，所以我希望这不会让我…

在我的情况下，这是需要的图标附加到一个，div和按钮元素，这与<i class="icon-class"></i>的工作有点不同，因为他们没有icon-class类。添加class="icon-class"会破坏样式。

相反，我为它们添加了一个数据图标属性，其中的值应该在element:: {content: "HERE"}之前，然后这个相当简单的JavaScript就会处理剩下的事情。

    {
        const fakeIcons = document.querySelectorAll('[data-icon]')

        for (const iconElement of fakeIcons) {

            const fakeClass = 'fake-' + Array.from(Array(20), () => Math.floor(Math.random() * 36).toString(36)).join('')
            const beforeContent = iconElement.getAttribute('data-icon')

            iconElement.classList.add(fakeClass)

            const style = document.createElement('style')
            style.type = 'text/css'
            style.innerHTML = `

                .${fakeClass}::before {
                    content: "${beforeContent}" !important;
                }

            `
            document.getElementsByTagName('head')[0].appendChild(style)
        }
    }

代码解释道:

选择具有指定属性(data-icon)的所有元素循环遍历它们随机生成一个以fake-开头的类名，后面跟着一个随机的字母数字字符串获取data-icon属性的值向元素中添加随机生成的类在伪元素设置内容之前为::创建样式在<head> HTML元素的末尾添加样式

2021-08-03 06:29:20

下面的解决方案告诉你如何用javascript的attr属性更新伪元素。

在HTML中添加一个属性，你可以用javascript setAttribute操作它。

<div 
 id="inputBoxParent" 
 count="0">
      ...
</div>

用js更新

inputBoxParent.setAttribute('count', value.length)

CSS -在伪元素中添加内容为attr(attributeName)

.input-box-container::after{
  content: attr(count);
}

你完蛋了!!

2021-03-20 10:10:25

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

推荐文章

最新文章

标签