Bagaimana untuk Mengubah CSS Teks Terpilih dengan JavaScript?

Menukar CSS Teks Terpilih dengan JavaScript

Dalam usaha untuk mencipta penanda buku yang menyerlahkan teks terpilih pada halaman web, pembangun menemui isu di mana kod jQuery yang digunakan untuk menukar CSS teks yang dipilih tidak berfungsi.

Percubaan Asal:

Kod percubaan menggunakan fungsi berikut:

function highlightSelText() {
    var SelText;
    if (window.getSelection) {
        SelText = window.getSelection();
    } else if (document.getSelection) {
        SelText = document.getSelection();
    } else if (document.selection) {
        SelText = document.selection.createRange().text;
    }
    $(SelText).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}

Penyelesaian:

Isu dengan kod asal timbul daripada ketidakupayaan jQuery untuk mengubah suai secara langsung CSS teks yang dipilih. Pendekatan yang lebih berkesan ialah menggunakan kaedah execCommand(), yang menawarkan arahan untuk mengubah warna latar belakang dalam pelbagai penyemak imbas moden.

Kod berikut menunjukkan cara untuk menyerlahkan sebarang pemilihan teks:

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

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

Kod yang dikemas kini ini berjaya menukar warna latar belakang teks yang dipilih, tidak kira sama ada pemilihan itu merangkumi berbilang elemen.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah CSS Teks Terpilih dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!