Wie ändere ich das CSS von ausgewähltem Text mit JavaScript?

CSS von ausgewähltem Text mit JavaScript ändern

Bei dem Versuch, ein Lesezeichen zu erstellen, das ausgewählten Text auf einer Webseite hervorhebt, stieß ein Entwickler auf ein Problem, bei dem der jQuery-Code, der zum Ändern des CSS des ausgewählten Textes verwendet wurde, nicht funktionierte.

Ursprünglicher Versuch:

Der versuchte Code verwendete die folgende Funktion:

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

Die Lösung:

Das Problem mit dem Originalcode entstand aus der Unfähigkeit von jQuery, das CSS des ausgewählten Textes direkt zu ändern. Ein effektiverer Ansatz ist die Verwendung der Methode execCommand(), die einen Befehl zum Ändern der Hintergrundfarbe in verschiedenen modernen Browsern bietet.

Der folgende Code zeigt, wie eine beliebige Textauswahl hervorgehoben wird:

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

Dieser aktualisierte Code ändert erfolgreich die Hintergrundfarbe des ausgewählten Texts, unabhängig davon, ob die Auswahl mehrere Elemente umfasst.

Das obige ist der detaillierte Inhalt vonWie ändere ich das CSS von ausgewähltem Text mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!