Как изменить значение содержимого псевдоэлемента :before с помощью Javascript
У меня есть граф, построенный с помощью CSS, который динамически изменяется с помощью JS. Я показываю максимальное значение графика с помощью псевдоэлемента как:
.graph:before {
content:""; //value that want set by JS
position:absolute;
top:0;
left:0;
}Поэтому мне нужно установить это значение с помощью JS. Я пробовал $(".graph:before").css("content", hh);, но это не помогло. Как получить это значение?
Надеюсь, приведенный ниже фрагмент поможет, вы можете указать нужное вам значение content через JS, используя функцию CSS attr().
Ниже у вас есть два варианта: использовать 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;
}
Обновление (2018): как было отмечено в комментариях, теперь вы можете сделать это.
Вы не можете изменять псевдоэлементы через JavaScript, поскольку они не являются частью DOM. Лучше всего определить другой класс в CSS с необходимыми стилями и добавить его к элементу. Поскольку из вашего вопроса следует, что это невозможно, возможно, вам нужно рассмотреть возможность использования настоящего элемента DOM вместо псевдоэлемента.
Вы можете использовать CSS переменной
:root {
--h: 100px;
}
.elem:after {
top: var(--h);
}
let y = 10;
document.documentElement.style.setProperty('--h', y + 'px')
Люди, которые все еще ищут решение этой проблемы, могут сделать это следующим образом, используя 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>А затем вы устанавливаете его :before в CSS и оформляете его следующим образом:
#something:before{
content:"1st";
font-size:20px;
color:red;
}
#something{
content:'1st';
}Обратите внимание, что я также установил атрибут content в самом элементе, чтобы вы могли легко убрать его позже.
Теперь есть кнопка, нажав на которую, вы хотите изменить цвет :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>Надеюсь, это поможет.
Я считаю, что есть простое решение, используя привлекательность (функции), чтобы определить содержание псевдо элемент. Вот рабочий пример с использованием 'название' атрибут, но она должна работать также с пользовательскими атрибутами.:
в
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>в
Если вы используете что-то вроде onoffswitch и хотите перевести CSS содержание атрибута i18next затем вы можете использовать один из i18next рамки пример на GitHub (i18next на jQuery Framework) и затем расширена функция с этим кодом:
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;
}
