我有由 CSS 构建的 grap，它是由 JS 动态更改的。我通过伪元素将图形最大值显示为：
.graph:before {
content:""; //value that want set by JS
position:absolute;
top:0;
left:0;
}
这就是为什么我需要通过 JS 设置这个值。我试过$(".graph:before").css("content", hh);，但没有帮助。如何获得该值？
【问题讨论】：
"${value}");
标签： javascript jquery
您可以使用 document.styleSheets 来修改伪选择器 cssRules
document.styleSheets[0].cssRules[0].style.content = '"111"';
【讨论】：
content: attr(...)（我几乎会为此+1），但应该这样做吗？仅当您希望将您的 Twitter 简历从“Web 应用程序开发人员”更改为“一个项目的维护者”时。
我遇到了类似的问题，但是图标问题。我需要在 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>
希望对你有帮助！
【讨论】：
我希望下面的 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;
}
【讨论】：
content 以外的属性other 缺乏attr() 函数的支持。否则支持此方案seems pretty broad.
<p><a href="#" data-fa-icon="&#xf206;"> Unicode example</a></p>
如果您使用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;
}
【讨论】：
你可以使用 CSS 变量
:root {
--h: 100px;
}
.elem:after {
top: var(--h);
}
let y = 10;
document.documentElement.style.setProperty('--h', y + 'px')
【讨论】：
content 属性。如果有人知道如何做到这一点，请发布一个示例。
更新（2018 年）：正如 cmets 中所述，您现在 can 执行此操作。
您不能通过 JavaScript 修改伪元素，因为它们不是 DOM 的一部分。你最好的办法是在你的 CSS 中用你需要的样式定义另一个类，然后将它添加到元素中。由于您的问题似乎不可能，因此您可能需要考虑使用真正的 DOM 元素而不是伪元素。
【讨论】：
You can't modify pseudo elements through JavaScript since they are not part of the DOM. 真的吗？
我相信有一个简单的解决方案，使用 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>
希望对你有帮助
【讨论】：