利用window.getSelection()来选中放大阅读器

今天没有找到什么问题。。就找了个别人想做的小demo,然后恬不知耻的做了下来。

光标选中的字符更改样式

这里写图片描述
哈哈,一开始听到又是懵的,好像不太可能,人家文本都是一个pre或者span里储存的,你要把他变成一个字一个span么,当然大家可能都是这么想的。。虽然想法很可笑。不过有个比较重要的思路在里面,就是利用分割来完成这一系列的操作。

对,一个标签里面的文字出现两种状态,按照我现在的能力来说,是不可能的。

所以解决的思路就是多个标签分割来制作。
先贴最开始的代码

<body>
<div id="warp">
    <span>abcdefgabcdefgabcdefgabcdefg</span>
    </div>
</body>

那么第一个问题来了,我们改怎么获取鼠标光标划过的内容呢。如果你去百度,百度上就会有很亲切很亲切的人告诉你,有个方法叫window.getSelection(),能够帮助你完成操作,照例我先去粘贴一下

Selection对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。要获取用于检查或修改的Selection对象,请调用 window.getSelection()。
锚点(anchor)
锚指的是一个选区的起始点(不同于HTML中的锚点链接,译者注)。当我们使用鼠标框选一个区域的时候&#

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值