如何通过Javascript更改伪：before元素的内容值[重复]

Posted 2023-02-22

【中文标题】如何通过Javascript更改伪：before元素的内容值[重复]

【英文标题】：How change content value of pseudo :before element by Javascript [duplicate]

【发布时间】：2012-05-16 17:42:27

【问题描述】：

我有由 CSS 构建的 grap，它是由 JS 动态更改的。我通过伪元素将图形最大值显示为：

.graph:before 
    content:""; //value that want set by JS
    position:absolute;
    top:0;
    left:0;

这就是为什么我需要通过 JS 设置这个值。我试过$(".graph:before").css("content", hh);，但没有帮助。如何获得该值？

【问题讨论】：

看到这个类似的问题***.com/questions/5041494/…

在 2016 年使用 jQuery 是可行的。

内容是一个字符串； 2019 年是：.style.setProperty('--varname',"$value");

【参考方案1】：

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

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

【讨论】：

这告诉我们它实际上可以做到，没有content: attr(...)（我几乎会为此+1），但应该这样做吗？仅当您希望将您的 Twitter 简历从“Web 应用程序开发人员”更改为“一个项目的维护者”时。

【参考方案2】：

我遇到了类似的问题，但是图标问题。我需要在 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>

希望对你有帮助！

【参考方案3】：

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

jQuery:

$('.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;

【讨论】：

@RhysvanderWaerden 所引用的站点是指对content 以外的属性other 缺乏attr() 函数的支持。否则支持此方案seems pretty broad.

我的错误。感谢您指出。由于无法编辑，我将删除我的原始评论。

你知道如何通过这种方式发送unicode吗？

问题在于它不是您可以设置的“任何东西”，例如 html 不会被解释。

@godblessstrawberry，我也有同样的问题，并找到了关于如何使用 unicode 的答案，here 提供的示例是：<p><a href="#" data-fa-icon=""> Unicode example</a></p>

【参考方案4】：

如果您使用onoffswitch 之类的东西，并且想用i18next 翻译css 内容属性，那么您可以使用github（i18next Jquery 框架）中的i18next Framework 示例之一，然后扩展该功能使用此代码：

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;

【参考方案5】：

你可以使用 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

【讨论】：

很好的解决方案，但这似乎不适用于设置 content 属性。如果有人知道如何做到这一点，请发布一个示例。

【参考方案6】：

更新（2018 年）：正如 cmets 中所述，您现在 can 执行此操作。

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

【讨论】：

-@JamesAllardice 这似乎是 CSS 或 JS 阵营的一个令人困惑的决定，你知道更多的上下文吗？

@timpeterson - 伪元素提供了一种访问文档信息的方法，否则无法访问。它们从未打算从文档中访问。请参阅 CSS 规范中关于 generated content 的部分。

这个聚会有点晚了，但对于未来的读者来说，这并不完全正确。你不能直接用JS修改伪元素，但是你可以用javascript修改伪元素可以“读取”的元素属性。请参阅上面链接的问题：***.com/questions/5041494/…

You can't modify pseudo elements through JavaScript since they are not part of the DOM. 真的吗？

这不再是真的。以下答案证明您可以。

【参考方案7】：

我相信有一个简单的解决方案，使用 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>

【参考方案8】：

还在寻找相同问题的解决方案的人，使用jQuery可以做到以下几点：

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>.graph:beforecontent:"'+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>

希望对你有帮助

【讨论】：

最佳答案在这里。附加（前置）有效，其余方法（attr，html，ect）没有。我确实从上面的答案中添加了 css，这是清除已经存在的内容的最佳方法。

谢谢，很高兴它帮到了你！