Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Menyerlahkan Teks Terpilih dengan Warna Latar Belakang Menggunakan JavaScript?

Bagaimana untuk Menyerlahkan Teks Terpilih dengan Warna Latar Belakang Menggunakan JavaScript?

DDD
DDDasal
2024-11-16 13:27:031014semak imbas

How to Highlight Selected Text with a Background Color Using JavaScript?

Menukar CSS Teks Terpilih Menggunakan JavaScript

Untuk menyerlahkan teks yang dipilih pada halaman web, anda boleh menggunakan fungsi execCommand(), yang membolehkan anda menukar warna latar belakang dalam penyemak imbas moden.

Untuk mencapai ini, anda boleh menggunakan fungsi berikut:

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);
    }
}

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount &amp;&amp; sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

Fungsi ini menyemak julat pemilihan dan menggunakan warna latar belakang yang ditentukan menggunakan execCommand(). Ia mengendalikan kedua-dua pelayar IE dan bukan IE, memastikan keserasian merentas pelayar.

Atas ialah kandungan terperinci Bagaimana untuk Menyerlahkan Teks Terpilih dengan Warna Latar Belakang Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn