Javascript如何改变pseudo :before元素的内容值

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

更新(2018)：正如评论中所指出的，you now can do。

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

Answer 2

我希望下面的代码片段能有所帮助，您可以使用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;
}

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