Как изменить значение содержимого псевдо: перед элементом по 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>