Изменить стиль css для псевдоэлемента: после содержимого с помощью JQuery

У меня есть форма шара, разработанная с помощью CSS3.
Пример скрипта JS Он имеет треугольник с

:after {
    content: "";
}

Мне нужно перемещать треугольник влево-вправо с помощью параметра слева css param с JQuery. Я знаю, что я не могу выбрать псевдоэлемент, который из DOM, но есть ли другой способ изменения: после стиля с js?

Да, мы можем поставить еще один div внутри, как

<div class="pop"><div class="arr"></div></div>

но это уродливое

Ответы

Ответ 1

Существует гораздо более простой способ: просто установите значение свойства content псевдоэлемента content в значение attr(some-attribute-name), оно будет использовать значение атрибута HTML для родителя в качестве содержимого псевдоэлемента. Затем вы можете использовать метод setAttribute() для родительского элемента для динамического изменения значения. Ниже приведены макетные фрагменты того, как этот метод будет выглядеть в действии. Я также сделал сообщение в блоге с более подробной информацией, в котором содержится живая примерная скрипта.

CSS

#SomeElement:after {
    content: attr(some-attribute-name);
}

HTML

<div id="SomeElement" some-attribute-name="Pseudo content here!"></div>

JavaScript (для изменения псевдоконтента)

var someElement = document.getElementById('SomeElement');
someElement.setAttribute('some-attribute-name', 'New pseudo content here!');

Ответ 2

Вы вставляете стили CSS динамически в голову, а затем изменяете это:

$("<style type='text/css' id='dynamic' />").appendTo("head");

$('.pop').click(function(e){
  $("#dynamic").text(".pop:after{left:" + e.offsetX+ "px;}");
});

Вот демо

http://jsfiddle.net/HWnLd/

Ответ 3

В соответствии с этим связанным вопросом вы не можете выбрать псевдоэлемент. Поэтому я бы предложил определить дополнительные классы CSS и добавить классы в воздушный шар с помощью jQuery. Например. используйте класс следующим образом:

.pop.right:after {
    left: 80%;   
}

и примените его следующим образом:

$('div.pop').addClass('right');

Работа jsFiddle: http://jsfiddle.net/nrabinowitz/EUHAv/2/