Jqueryで｢:before｣のような疑似クラスの値を変更するのはどうすればよいでしょうか。

Question

匿名質問者

Jqueryで｢:before｣のような疑似クラスの値を変更するのはどうすればよいでしょうか。

やりたい事としてはアイコンフォントのプロパティ(font-sizeやcolor)を変更したいと考えています。

現状はどうしてもアクセスできないので$(セレクタ).removeClassや$(セレクタ).addClassで変更しているのですが、できれば$(セレクタ).css()のような形で操作できればと考えています。

回答の条件

1人5回まで

登録：2014/04/26 22:52:03
終了：2014/05/03 22:55:04

匿名回答3号 2015/06/11 21:27:30

×疑似クラス
○疑似要素

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

Answer 1 · 2014-04-26T23:06:41+09:00

No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/04/26 23:06:41

え。

$("div#target").prev().css("color", "red");

とかで取って来られないんでしたっけ。。。
http://www.tohoho-web.com/js/jquery/traversing.htm

他6件のコメントを見る

回答ありがとうございます。

試してみたのですがやはりアクセスできないようです。

2014/04/26 23:33:08

$("#target").children("#before_item").css("color", "red");

でどうだ！
職場にいれば、すぐに試せるのにもどかしい！！

2014/04/27 00:14:36

いや、

$("#target").children().first().css("color", "red");

が確実かな。

2014/04/27 00:20:59

試してみましたがやはりうまくいきませんでした。

具体的には以下のサイトで落とせるアイコンフォントを利用しております。

http://www.flaticon.com/

色々と情報を探していますが、Googleでも具体的な例が存在しないところを見ると、そもそも現状のCSSやJavaScriptの仕様では難しい(そもそもできない)のかもしれません。

2014/04/27 00:26:29

うーん。

$("#target").before("＜img src='...'＞＜／img＞");

で作っておいて、

$("#target").prev().css("color", "red");

で出来るはずだと思うんだけど。ドコが違うんだろう。。。

2014/04/27 00:55:03

えっと、おそらくそれは｢#target｣の前後に特定のコンテンツを追加して、そのコンテンツをprev又はnextでアクセスし、そのプロパティにアクセスしているのだと思います。

もともとbefore()自体がコンテンツの追加メソッドですので。

ですので、疑似セレクタにアクセスしているわけではないのではないかと思います。

2014/04/27 01:03:51

ああ。:before、:after疑似セレクタ自体は、他の疑似セレクタと違って、JQueryで直接は対応してないんですよ。たぶん前述の方法でコンテントを追加して操作する思想なんだと思います。

2014/04/27 01:11:00

そうですね。

やはり双方技術的には別物であるので現状の仕様では直接操作する方法は存在しないようですね。

色々とありがとうございました。

2014/04/27 02:33:25

Answer 2 · 2014-04-26T23:09:55+09:00

No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/04/26 23:09:55

$(セレクタ).css(～～)　と書く時，セレクタ内に疑似クラスを含めるはずですが。
・・・そういう話ではないのですか？

他1件のコメントを見る

疑似セレクタでは:beforeに対応してないんですよねー（泣

2014/04/27 00:09:55

ごめん，jQueryどころかそもそもJavaScriptって疑似クラスに対応してないんでした。

>CSSの疑似クラスは非DOM。JavaScript/jQueryで直接操作は不可能。style要素の動的変更で対処せよ
>http://d.hatena.ne.jp/TipsMemo+computer-technology/20140426/p1

2014/04/27 01:15:10

Jqueryで｢:before｣のような疑似クラスの値を変更するのはどうすればよいでしょうか。

回答（2件）

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/04/26 23:06:41

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/04/26 23:09:55

コメント（1件)

この質問への反応（ブックマークコメント）

Jqueryで｢:before｣のような疑似クラスの値を変更するのはどうすればよいでしょうか。

回答（2件）

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。詳しくはこちら2014/04/26 23:06:41

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。詳しくはこちら2014/04/26 23:09:55

コメント（1件)

この質問への反応（ブックマークコメント）

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/04/26 23:06:41

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら2014/04/26 23:09:55