スポンサーリンク

CSSの疑似クラスは非DOM。JavaScript/jQueryで直接操作は不可能。style要素の動的変更で対処せよ

jQueryで要素のセレクタを記述する際, :before などの疑似クラスを含めることができない。

その理由は,そもそもJavaScriptから疑似クラスを操作できないからだ。

要素.style でDOMのCSSプロパティを取得できるけど,疑似クラスはその中に含まれていない。

擬似要素とjQuery -クリックイベント編- - べたな雑記帳
http://yami-beta.hateblo.jp/entry/201...

  • そもそも:beforeや:afterで表示されている文字列は、ブラウザで表示した場合にソースに存在しない
  • 現在の仕様では、擬似要素をjQueryオブジェクト化できない


javascript - Manipulating CSS pseudo-elements using jQuery (e.g. :before and :after) - Stack Overflow
http://stackoverflow.com/questions/50...

  • You can't select pseudo elements in jQuery because they are not part of DOM.

ではどうすればよいかと言うと,対処法としてstyle要素を動的に生成すればよい。下記のサンプルコードを参照。

JavaScriptでCSSの擬似クラスを設定する方法: 小粋空間
http://www.koikikukan.com/archives/20...

  • styleプロパティには擬似クラスがなく(というか、そもそもプロパティではない)、 a:link a:visited a:hover a:active などの設定方法が不明
  • style要素を生成


javascript - Changing width property of a :before css selector using JQuery - Stack Overflow
http://stackoverflow.com/questions/10...

  • you could always append a new style element to the document's head like: $('head').append('<style>.column:before{width:800px !important;}</style>');


javascriptで:beforeや:afterなど擬似要素のプロパティや値を編集するにはどのようにしたらいいのでしょうか。jQueryを使わずに扱う方法を教えていただけますか。 - W3Q
http://w3q.jp/t/3571

  • どうしてもやりたいならCSSルールを追加するしかありません