• 技术文章 >web前端 >H5教程

    API之range对象

    高洛峰高洛峰2017-02-09 14:48:50原创848
    range对象:
    是一种fragment(HTML片断),它包含了节点或文本节点的一部分。一般情况下,同一时刻页面中只可能
    有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏览器不允许,例如Chrome)。
    可以从selection中获得range对象,也可以使用document.createRange()方法获得
    1.getSelection():获取页面选中的信息;
    2.rangeCount:区间数,选中几个内容;
    3.selection.rangeCount;
    4.selection.getRangeAt(i);

    5.createRange()方法创建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>

    更多API之range对象相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:API range
    上一篇:range对象之selectNode等方法 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 开发人员所需要知道的HTML5性能分析面面观_html5教程技巧• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• 避免常见的六种HTML5错误用法 (5-6)• Html5 Canvas初探学习笔记(13) -图片变换• HTML5重塑Web世界它将如何改变互联网_html5教程技巧
    1/1

    PHP中文网