Как изменить значение содержимого псевдо: перед элементом по Javascript

У меня есть граф, построенный с помощью CSS, который динамически изменяется JS. Я показываю максимальное значение графика псевдоэлементом как:

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

Вот почему мне нужно установить это значение JS. Я попробовал $(".graph:before").css("content", hh);, но это не помогло. Как получить эту ценность?

Ответ 1

Вы не можете изменять псевдо элементы через JavaScript, так как они не являются частью DOM. Лучше всего определить другой класс в CSS со стилями, которые вам нужны, а затем добавить это к элементу. Так как это не кажется возможным из вашего вопроса, возможно, вам нужно взглянуть на использование реального элемента DOM вместо псевдо файла.

Ответ 2

Я надеюсь, что приведенный ниже фрагмент может помочь, вы можете указать значение content, которое вы хотите использовать через JS, используя функцию CSS attr().

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

Ответ 3

Люди, которые все еще ищут решение одной и той же проблемы, выполнимы следующим образом с помощью 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, на который вы хотите изменить цвет: до зеленого и его размер шрифта до 30 пикселей. Вы можете достичь этого следующим образом:

Определите css с вашим необходимым стилем в каком-то классе .activeS:

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

Теперь вы можете изменить: перед стилем, добавив класс в свой: перед элементом следующим образом:

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

Я надеюсь, что это поможет

Ответ 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>