::selectioncssで色を設定したので、画面上のテキストをハイライトするとテキストの色がピンクになります。ページの読み込み時にjQueryを介してその色をオーバーライドしようとしています。とてもシンプルなはずです。しかし、それは私にとってはうまくいきません。
5 に答える
この種の効果を実現したい場合は、CSS クラスに基づいて色の変更を適用する必要があると思います。私はあなたの jsfiddle をフォークしました。結果は次のとおりです。
あなたの質問は興味深いと思いますが、これをどこで実用化できるかを理解するのに苦労しています。その場でテーマを変更しますか?
この質問によると、疑似クラスを操作するための DOM インターフェイスがないため、選択範囲の強調表示の色を変更することはできません。できることは、要素のクラスを変更することです。
私も同じ問題を抱えていたので、この質問に出くわしました。<style>解決策は、cssプロパティを持つタグをドキュメント本文に追加することです。
$('<style>
p::selection{
background-color:#000;
}
p::-moz-selection{
background-color:#000;
}</style>').insertAfter('body *:last');
これはそれを行うための最もエレガントな方法ではないかもしれませんが、少なくともそれは機能します。
::selectionjquery セレクターではなく、CSS疑似クラスです。
これを行うことはできず$('p::selection').css({color: "#3c3"})、テキスト選択の色が変更されることを期待しています。
$(<selector>)ID、CSS クラス、属性を使用して、柔軟な方法で dom 要素を選択できます...:hover、:after...は、要素のスタイル::selectionを設定できる CSS 疑似セレクターです。
jquery セレクターの構文は疑似クラス css と同じように見えますが、それらは異なります。
ところで、css 疑似クラス ( :hover... など) のスタイルをプログラムで変更することはできません。
JavaScript から直接色を設定するのではなく、クラスを使用するように変更できる場合は、その方がはるかに簡単なので、そうしてください。
それ以外の場合は、次の質問を参照してください: JavaScript から CSS 疑似クラス ルールを設定する
この回答で提供されているライブラリを使用する:
jss('p::selection', {
color: '#3c3'
});