ホームページ > ウェブフロントエンド > CSSチュートリアル > JavaScriptで選択したテキストの背景色を変更するにはどうすればよいですか?

JavaScriptで選択したテキストの背景色を変更するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-20 01:22:03
オリジナル
873 人が閲覧しました

How to Change the Background Color of Selected Text with JavaScript?

JavaScript を使用して選択したテキストの CSS を変更する方法

Web ページの機能を強化するには、JavaScript ブックマークレットを作成するとよいでしょう。選択したテキストが強調表示され、背景が黄色に変わります。 getSelText() を使用してテキストを簡単に取得できますが、jQuery のhighlightSelText() 関数で CSS を変更しようとすると問題が発生する場合があります。

この問題は、highlightSelText() が CSS を変更できないために発生します。選択したテキストの。より効果的な解決策は、最新のブラウザで背景色を変更するコマンドを提供する execCommand() メソッドを使用することです。この機能を利用する更新されたコード スニペットは次のとおりです。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

function highlight(colour) {

    var range, sel;

    if (window.getSelection) {

        // IE9 and non-IE

        try {

            if (!document.execCommand("BackColor", false, colour)) {

                makeEditableAndHighlight(colour);

            }

        } catch (ex) {

            makeEditableAndHighlight(colour)

        }

    } else if (document.selection && document.selection.createRange) {

        // IE <= 8 case

        range = document.selection.createRange();

        range.execCommand("BackColor", false, colour);

    }

}

ログイン後にコピー

この関数は execCommand() を利用して、選択したテキストに必要な背景色を適用し、Internet Explorer を含むすべての主要なブラウザとの互換性を確保します。

以上がJavaScriptで選択したテキストの背景色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート