recherche

Maison >interface Web >Tutoriel H5 >Objet de plage API

Objet de plage API

高洛峰
高洛峰original
2017-02-09 14:48:501578parcourir

objet range :
est un fragment (fragment HTML) qui contient un nœud ou une partie d'un nœud de texte. Dans des circonstances normales, il peut y avoir une seule plage
sur la page à la fois, ou il peut y avoir plusieurs plages (utilisez la touche Ctrl pour plusieurs sélections, mais certains navigateurs ne le permettent pas, comme Chrome).
Vous pouvez obtenir l'objet range à partir de la sélection, ou vous pouvez utiliser la méthode document.createRange() pour l'obtenir
1.getSelection() : Obtenez les informations sélectionnées sur la page
2. rangeCount : Le nombre d'intervalles, combien de contenus sont sélectionnés ;
3.selection.rangeCount;
4.selection.getRangeAt(i);

5.createRange() la méthode crée un objet range ;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>range对象</title>
</head>
<body>
    selection对象和range对象
    <input type="button" value="点击" onclick="use()">
    <div id="rangeDiv"></div>
    <script>
        function use() {
            var html;
            rangeDiv=document.getElementById("rangeDiv");
            selection=document.getSelection();
            if(selection.rangeCount>0){
                html="您选择了"+selection.rangeCount+"段内容<br/>" ;
                for(var i=0;i<selection.rangeCount;i++){
                    var range=selection.getRangeAt(i);
                        html+="第"+(i+1)+"段内容为:"+range+"<br/>";
                }
                rangeDiv.innerHTML=html;
            }
        }
    </script>
</body>
</html>

Plus d'API Pour les articles liés aux objets de plage, veuillez faire attention au site Web PHP chinois !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：selectNode et autres méthodes d'objet rangeArticle suivant：selectNode et autres méthodes d'objet range

Articles Liés

Voir plus