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

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

我希望下面的代码段可能会有所帮助,你可以content使用CSS attr()函数通过JS 指定你想要的值.

JavaScript的:

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

CSS:

var graphElem = document.querySelector('.graph');
graphElem.addEventListener('click', function (event) {
    event.target.setAttribute('data-before', 'anything');
});

Answer 2

更新(2018年):正如评论中所述,您现在可以这样做.

您不能通过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

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

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

我希望它有帮助