Вопрос по javascript, jquery – Как изменить значение содержимого псевдо: перед элементом с помощью Javascript

28

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

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

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

содержаниеString; в 2019 году это:.style.setProperty('--varname',"${value}"); Danny '365CSI' Engelman
увидеть этот похожий вопросstackoverflow.com/questions/5041494/… antyrat
Это можно сделать как в 2016 году, используя jQuery. Learner

Ваш Ответ

6   ответов
-2

onoffswitch и хотите перевести атрибут содержимого CSS сi18next тогда вы можете использовать один изi18next Framework пример из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;
}
35

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

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;
}
Error: User Rate Limit ExceededhereError: User Rate Limit Exceeded<p><a href="#" data-fa-icon="&#xf206;"> Unicode example</a></p>
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededattr()Error: User Rate Limit ExceededotherError: User Rate Limit ExceededcontentError: User Rate Limit Exceededseems pretty broad.
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

что есть простое решение, использующее функцию attr () для указания содержимого псевдоэлемента. Вот рабочий пример с использованием «заголовка» атрибут, но он должен работать и с пользовательскими атрибутами.

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>

4

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

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

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

Теперь вы можете изменить стиль: before, добавив класс в элемент your: 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>

I hope it helps

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
25

Update (2018): как было отмечено в комментариях, вы сейчасМожно сделай это.

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

You can't modify pseudo elements through JavaScript since they are not part of the DOM.Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededgenerated contentError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededdirectlyError: User Rate Limit Exceededstackoverflow.com/questions/5041494/…
6

:root {
  --h: 100px;
}

.elem:after {
  top: var(--h);
}

let y = 10;

document.documentElement.style.setProperty('--h', y + 'px')

https://codepen.io/Gorbulin/pen/odVQVL

Error: User Rate Limit Exceeded

Похожие вопросы