Question

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

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

这就是我需要通过JS设置此值的原因。我试过$(".graph:before").css("content", hh);，但没有用。如何获得这个价值？

Answer 1

我希望下面的代码段可能会有所帮助，您可以使用CSS attr()函数通过JS指定所需的content值。

JavaScript的：

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

CSS：

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

Answer 2

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

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

Answer 3

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

Answer 4

仍在寻找相同问题解决方案的人，使用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之前设计它：

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

请注意我还在元素中设置了content属性，以便您以后可以轻松将其取出。现在有一个button点击，你想要改变颜色：before到green，它的font-size改为30px。您可以按如下方式实现：

在某个班级.activeS上定义一个具有所需风格的CSS：

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

现在，您可以在样式之前更改：将类添加到：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>

我希望它有所帮助

Answer 5

我相信有一个简单的解决方案，使用attr（）函数来指定伪元素的内容。这是一个使用＆＃39;标题＆＃39;属性，但它也应该与自定义属性一起使用。：

＆＃13;

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';
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

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

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

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

HoverTool(tooltips=[('date', '@DateTime{%F}')],
          formatters={'@DateTime': 'datetime'})

和脚本

<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>

希望有帮助！

Answer 7

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

const data1 = [{ id: 123, option: 'ABC', value: "123" }, { id: 234, option: "DFG", value: "234" } ];
const data2 = [{ id: 123, option: 'ABC', value: "123" }];

const idSet = new Set(data2.map(o => o.id));
const res = data1.map(o => ({...o, value: idSet.has(o.id) ? "0" : o.value}));
console.log(res);

Answer 8

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

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;
}

如何通过Javascript更改伪的内容值：在元素之前

8 个答案: