如何通过Javascript更改伪:before元素的内容值

我希望下面的代码片段可能会有所帮助，您可以使用 CSS attr() 函数通过 JS 指定您想要的content值。下面你有两个选择：使用 JavaScript 或 jQuery：

j查询：

$('.graph').on('click', function () {
    //do something with the callback
    $(this).attr('data-before','anything'); //anything is the 'content' value
});

JavaScript：

var graphElem = document.querySelector('.graph');
graphElem.addEventListener('click', function (event) {
    event.target.setAttribute('data-before', 'anything');
});

.CSS：

.graph:before {
    content: attr(data-before); /* value that that refers to CSS 'content' */
    position:absolute;
    top: 0;
    left: 0;
}

更新 (2018(：正如评论中所述，您现在可以执行此操作。

你不能通过 JavaScript 修改伪元素，因为它们不是 DOM 的一部分。最好的办法是使用所需的样式在CSS中定义另一个类，然后将其添加到元素中。由于从您的问题来看这似乎是不可能的，也许您需要考虑使用真正的 DOM 元素而不是伪元素。

您可以使用 CSS 变量

:root {
  --h: 100px;
}
.elem:after {
  top: var(--h);
}
let y = 10;
document.documentElement.style.setProperty('--h', y + 'px')

https://codepen.io/Gorbulin/pen/odVQVL

我相信有一个简单的解决方案，使用 attr(( 函数来指定伪元素的内容。下面是一个使用 'title' 属性的工作示例，但它也应该适用于自定义属性：

document.getElementById('btn_change1').addEventListener("click", function(){
    document.getElementById('test_div').title='Status 1';
});
   
document.getElementById('btn_change2').addEventListener("click", function(){       
    document.getElementById('test_div').title='Status 2';
});

#test_div {
   margin: 4em;
   padding:2em;
   background: blue;
   color: yellow;
}
#test_div:after {
   content:attr(title);
   background: red;
   padding:1em;
}

<button id='btn_change1'>Change div:after to [Status 1]</button>
<button id='btn_change2'>Change div:after to [Status 2]</button>
<div id='test_div' title='Initial Status'>The element to modify</div>

仍在寻找相同问题的解决方案的人，使用 jQuery 可以按如下方式进行：

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>.graph:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

这个例子说明，在单击按钮：changeBefore 时，.graph:before的值将根据它的新动态来值而变化。

有关更改:before或:after元素样式或获取其内容的更多说明：

假设你的 HTML 是这样的：

<div id="something">Test</div>

然后你在CSS中设置它的：before并设计它，就像：

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

请注意，我还在元素本身中设置了content属性，以便您以后可以轻松将其取出。现在有一个button单击，您想将 ：before 的颜色更改为绿色，将其字体大小更改为 30px。您可以按如下方式实现：

在某些类.activeS上定义具有所需样式的 css：

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

现在，您可以通过将类添加到 ：before 元素来更改 ：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>

我希望它有所帮助

我遇到了类似的问题，但有图标。我需要在 html5 中切换音频播放器的播放和暂停图标。

这里的问题是，由于使用了''符号，HTML，CSS和jQuery都以不同的方式解释"内容"值以显示图标。

因此，最好的解决方法是删除并重新创建节点。这是我的代码：

<ul class="list list--buttons">
    <li><a href="#" class="list__link previuos"><i class="fa fa-step-backward"></i></a></li>
    <li><a href="#" class="list__link playpause"><i class="fa fa-play"></i></a></li>
    <li><a href="#" class="list__link next"><i class="fa fa-step-forward"></i></a></li>
</ul>

和剧本

<script type="text/javascript">
            $(
                function(){
                    var aud = $('audio')[0];
                    $('.playpause').on('click', function(e){
                        e.preventDefault();
                    if (aud.paused) {
                        aud.play();
                        /* from play icon to pause icon */
                        $('.playpause .fa-play').remove();
                        $('.playpause').append('<i class="fa fa-pause"></i>');
                    }
                    else {
                        aud.pause();
                        /* from play icon to pause icon */
                        $('.playpause .fa-pause').remove();
                        $('.playpause').append('<i class="fa fa-play"></i>');
                    }
                })
                $('.next').on('click', function(e){
                    e.preventDefault();
                    aud.src = '{$content:audio-file}';
                })
                $('.previuos').on('click', function(e){
                    e.preventDefault();
                    aud.src = '{$content:audio-file}';
                })
                aud.ontimeupdate = function(){
                    $('.progress').css('width', aud.currentTime / aud.duration * 100 + '%')
                }
            })
        </script>

希望对您有所帮助！

您可以使用 document.styleSheets 修改伪选择器 cssRules

document.styleSheets[0].cssRules[0].style.content = '"111"';

如果你使用类似onoffswitch的东西，并且想用i18next翻译css content属性，那么你可以使用github(i18next Jquery Framework(中的i18next框架示例之一，然后使用以下代码扩展函数：

var before = i18next.t('onoffswitch.before');
var after = i18next.t('onoffswitch.after');
$('.onoffswitch-inner')
    .attr('data-before', before )
    .attr('data-after', after );

CSS代码必须是这样的：

.onoffswitch-inner:before {
    content:  attr(data-before);
    padding-left: 10px;
    background-color: #65AFF5; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content:  attr(data-after);
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}