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

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

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

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

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

当前回答

有人评论说附加一个完整的样式元素到头部元素，如果你只做一次，这还不错，但如果你需要重置它不止一次，你最终会有大量的样式元素。所以为了防止这种情况，我在头部创建了一个带有id的空白样式元素，并像这样替换它的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()

现在，在我的情况下，我需要这个来根据另一个元素的高度设置一个before元素的高度，它会在调整大小时发生变化，所以使用这个，我可以在每次窗口调整大小时运行setHeight()，它将正确地替换<style>。

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

2017-09-22 08:31:19

其他回答

$ (' .span ')。attr(“data-txt”、“foo”); $ (' .span ')。点击(函数(){ (美元)。Attr ('data-txt'，"任何其他文本"); }) .span { ｝ .span:{后内容:attr (data-txt); ｝ < script src = " https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js " > < /脚本> < div class =“跨度”> < / div >

2017-06-28 11:42:19

如果你想完全通过CSS来操作::before或::after sudo元素，你可以用JS来做。见下文;

jQuery('head').append('<style id="mystyle" type="text/css"> /* your styles here */ </style>');

注意<style>元素是如何具有一个ID的，如果样式动态变化，可以使用该ID删除它并再次添加到它。

这样，在JS的帮助下，你的元素就可以完全按照你想要的样式通过CSS进行样式化。

2014-06-14 20:13:28

我有一些不同的东西给你，既简单又有效。

    <style> 
    .case-after:after { // set your properties here like eg: 
        color:#3fd309 !important; 
     } 
     .case-before:before { // set your properties here like eg: 
        color:#151715 !important; 
     }
 </style>
  // case for after
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-after');
    });

     // case for before
    $('#button-id').on('click', function() {
        $(".target-div").toggleClass('case-before');
    });

2019-11-12 09:32:18

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

在我的情况下，这是需要的图标附加到一个，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

谢谢大家! 我设法做了我想做的事: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>

2014-07-10 15:26:38

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

推荐文章

最新文章

标签