31

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

:after {
    content: "";
}

Jqueryで左側のCSSパラメータを変更して、三角形を左右に移動する必要があります。DOM の外にある疑似要素を選択できないことはわかっていますが、:after スタイルを js で変更する別の方法はありますか?

はい、次のように別の div を内部に配置できます

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

しかし、それは醜いです

4

3 に答える 3

42

はるかに簡単な方法があります。疑似要素の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!');
于 2012-08-09T19:57:09.370 に答える
27

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/

于 2011-10-25T02:59:56.310 に答える
21

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

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

次のように適用します。

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

jsFiddleの動作：http：//jsfiddle.net/nrabinowitz/EUHAv/2/

于 2011-10-24T22:00:13.030 に答える