web-dev-qa-db-ja.com

疑似要素のCSSスタイルを変更する：JQueryでコンテンツの後に

CSS3で設計された風船の形をしています。
JS Fiddle Example 三角形が作られています

:after {
    content: "";
}

Modifyleftcss param with Jqueryで三角形を左右に移動する必要があります。私は、DOMから擬似要素を選択できないことを知っていますが、jsでスタイルを変更する別の方法がありますか？

はい、次のように別のdivを入れることができます

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

しかし、それはいです

htmlcsspseudo-element
30
Shara

はるかに簡単な方法があります。擬似要素の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!');
41
csuwldcat

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/

27
methodofaction

この関連する質問 に従って、擬似要素を選択することはできません。したがって、追加のCSSクラスを定義し、jQueryを使用してクラスをバルーンに追加することをお勧めします。例えば。次のようなクラスを使用します。

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

次のように適用します：

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

作業jsFiddle： http://jsfiddle.net/nrabinowitz/EUHAv/2/

21
nrabinowitz