5

標準のブラウザの場合、次のようなものを使用して、選択したテキストの色を変更できます。

div.txtArea::selection {
 background: transparent;
}

div.txtArea::-moz-selection {
 background: transparent;
}

div.txtArea::-webkit-selection {
 background: transparent;
}

しかし、代わりにJavaScriptを使用してこれを行う必要があります。

ユーザーはテキストを選択してから色を変更できます。彼らが別の色を選択している間、それは常に色を更新します。テキストが選択されているため、色がどのように見えるかを確認できません。カラーチェンジャーのマウスオーバー時にのみ透明になるように、ターゲット要素の選択スタイルを変更する必要があります。

私は以下を含むいくつかのことを試みました：

$('div.txtArea').css({
    'selection': 'transparent',
    '-moz-selection': 'transparent',
    '-webkit-selection': 'transparent'
});

javascriptでこれを行う方法はありますか？

4

1 に答える 1

7

疑似クラスを操作するためのDOMインターフェースはありません。できることは、スタイルシートにルールを追加することだけです。例えば：

// Get the first stylesheet 
var ss = document.styleSheets[0]

// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
    ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);    
    ss.insertRule('div.txtArea::selection { background: transparent; }', 0);    
    ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);    
}

IEのstylesheet.cssRules [index].style、stylesheet.rules [index] .styleを使用してルールにアクセスし、変更することができます。これは、もう少し複雑になります。

これらのバージョンのIEはをサポートしていないため、addRule（）を使用したIE6-8の例は含めませんでし::selectionた。

于 2010-08-06T21:52:02.897 に答える