文档章节

[H5]API之range对象

Akillua
 Akillua
发布于 2017/07/27 10:55
字数 220
阅读 2
收藏 0

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 lang="en">
<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>

  

© 著作权归作者所有

上一篇: css3选择器
Akillua
粉丝 0
博文 43
码字总数 19935
作品 0
郑州
私信 提问
【quickhybrid】JSBridge的实现

前言 本文介绍框架的核心的实现 由于在最新版本中,已经没有考虑等低版本,因此在选用方案时没有采用方式,而是直接基于实现 交互原理 具体H5和Native的交互原理可以参考前文的 交互原理图如...

dailc
02/18
0
0
C# 添加、修改、删除Excel迷你图表的方法

Excel表格中的迷你图表能够直观地向我们展示出数据的变化趋势。本文将介绍C#如何实现为表格数据生成迷你图表,以及修改和删除迷你图表的方法。下面将详细讲述。所用组件工具:Spire.XLS for...

E_iceblue
2017/12/14
0
0
【quickhybrid】JS端的项目实现

前言 API实现阶段之JS端的实现,重点描述这个项目的JS端都有些什么内容,是如何实现的。 不同于一般混合框架的只包含JSBridge部分的前端实现,本框架的前端实现包括JSBridge部分、多平台支持...

dailc
02/18
0
0
android addJavascriptInterface 不能生效 解决办法

1. webview.addJavascriptInterface() doen not work on API 16+ 常见的客户端与H5的混合编程是使用scheme+、JS bridge、provider等。 在做Android 与 H5 客户端交互时,发现一个很诡异的错误...

范大脚脚
2017/12/07
0
0
anziguoer/wechatPay

#wechatPay nodejs 微信公众号支付开发 NodeJs 微信公众号功能开发,移动端 H5页面调用微信的支付功能。这几天根据公司的需要使用 node 和 h5页面调用微信的支付功能完成支付需求。现在把开发...

anziguoer
2016/09/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

parseint和isNaN用法

本文转载于:专业的前端网站➭parseint和isNaN用法 <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><script> var a='12'; alert......

前端老手
今天
7
0
Kylin 精确去重在用户行为分析中的妙用

作者:史少锋,Apache Kylin committer & PMC,2019/10/11 在上次文章《如何在 1 秒内做到大数据精准去重》中,我们介绍了 Apache Kylin 为什么要支持大数据集上的精确去重,以及基于 Bitmap...

ApacheKylin
今天
6
0
学习记录(二) es6基本语法(rest参数,模板化,axios模块,拦截器)

日常学习记录 模块化:把一个大文件分成多个小文件,按照一定规范进行拼接 es5写法: 导出:module.exports = 数据 导入:require("路径") /路径未添加后缀名时 //默认添加.js //把路径作为文件名...

Pole丶逐
今天
4
0
以程序员的角度怎么购买一台「性价比高的电视」

前俩天有小伙伴在我的文章下留言,说能否把 【国内电视机都介绍一下】,今天我已在TV端开发多年的程序员的角度。谈谈已程序员的角度如何购买一台性价比高的电视。 国内大的电视机品牌介绍 长...

我们都很努力着
今天
5
0
PhotoShop 色调:理解直方图/RGB通道信息

一、直方图:图表的形式,展示图像像素分布的情况 1.平均值:表示平均亮度 2.标准偏差值:表示亮度值范围内的中间值 3.像素: 表示用于计算直方图的像素总数 4.色阶:显示指针下面的区域亮度...

东方墨天
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部