我有由 CSS 构造的图，它是由 JS 动态更改的。我通过伪元素将图形最大值显示为：
.graph:before {
content:""; //value that want set by JS
position:absolute;
top:0;
left:0;
}
这就是为什么我需要通过 JS 设置这个值。我试过$(".graph:before").css("content", hh);但没有帮助。如何获得该值？
问问题
91497 次
8 回答
92
我希望下面的代码片段可能会有所帮助，您可以使用 CSS函数content通过 JS 指定您想要的值。attr()下面有两个选项：使用 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;
}
于 2017-02-02T10:44:12.687 回答
36
更新（2018 年）：如评论中所述，您现在可以执行此操作。
您不能通过 JavaScript 修改伪元素，因为它们不是 DOM 的一部分。你最好的办法是在你的 CSS 中用你需要的样式定义另一个类，然后将它添加到元素中。由于您的问题似乎不可能，因此您可能需要考虑使用真正的 DOM 元素而不是伪元素。
于 2012-05-08T08:37:40.837 回答
26
您可以使用 CSS 变量
:root {
--h: 100px;
}
.elem:after {
top: var(--h);
}
let y = 10;
document.documentElement.style.setProperty('--h', y + 'px')
于 2018-05-22T13:34:54.040 回答
6
我相信有一个简单的解决方案，使用 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>于 2017-10-01T02:03:32.680 回答
5
仍在寻找相同问题的解决方案的人，可以使用 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>
此示例说明单击 button: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。您可以按如下方式实现：
在某些类上定义具有所需样式的 css .activeS：
.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>
我希望它有帮助
于 2016-11-14T13:42:17.877 回答
0
我有一个类似的问题，但有图标。我需要在 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>
希望能帮助到你！
于 2020-04-12T09:42:59.053 回答
0
您可以使用 document.styleSheets 修改伪选择器 cssRules
document.styleSheets[0].cssRules[0].style.content = '"111"';
于 2020-06-13T10:30:47.327 回答
-2
如果您使用类似 onoffswitch 的东西并希望使用 i18next转换css 内容属性，那么您可以使用来自github （i18next Jquery 框架）的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;
}
于 2019-02-20T11:34:12.333 回答