Comment changer le CSS du texte sélectionné avec JavaScript ?-tutoriel CSS-php.cn

Comment changer le CSS du texte sélectionné avec JavaScript ?

Mary-Kate Olsen

Libérer： 2024-11-17 12:29:02

original

755 Les gens l'ont consulté

How to Change the CSS of Selected Text with JavaScript?

Modification du CSS du texte sélectionné avec JavaScript

Dans le but de créer un bookmarklet qui met en évidence le texte sélectionné sur une page Web, un développeur a rencontré un problème où le code jQuery utilisé pour modifier le CSS du texte sélectionné ne fonctionnait pas.

Original Tentative :

Le code tenté a utilisé la fonction suivante :

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

Copier après la connexion

La solution :

Le problème avec le code d'origine est survenu de l'incapacité de jQuery à modifier directement le CSS du texte sélectionné. Une approche plus efficace consiste à utiliser la méthode execCommand(), qui propose une commande pour modifier la couleur d'arrière-plan dans divers navigateurs modernes.

Le code suivant montre comment mettre en surbrillance n'importe quelle sélection de texte :

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

Copier après la connexion

Ce code mis à jour modifie avec succès la couleur d'arrière-plan du texte sélectionné, que la sélection s'étende ou non sur plusieurs éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!