javascript - 获取页面中被选中文字的相对位置
PHP中文网
PHP中文网 2017-04-10 14:50:01
[JavaScript讨论组]

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, saepe, tempore, quam, similique perferendis possimus rem optio harum sapiente hic dicta temporibus quae sit neque eaque illo ex 你好 asperiores consectetur nemo ullam odio delectus distinctio enim quasi cumque accusantium deleniti voluptatum eligendi sunt quibusdam

在页面中选中了

标签里的“你好”后,我想要返回它在页面中的相对位置。
要用到什么方法。

PHP中文网
PHP中文网

认证高级PHP讲师

全部回复(1)
PHP中文网

getSelection() 可以捕捉到光标选择内容的位置,也能拿到选择内容所处的 DOM 标签,也能拿到选择内容前的文字。

  1. 先算出 容器DOM 所处页面的相对位置
  2. 新设一个 p,样式和 容器DOM 要一致,然后把选择内容前的文字放进去,容器DOM 的高度 + 该 p 的高度 就是选择文字的高度了
  3. 记下上一个 p 的宽度,然后再设置一个 span 保证内容在一行然后得到这个 span 的宽度,并以 p 的宽度取余,这样 容器DOM 的宽度 + p 宽度 % span 宽度 就是选择文字的宽度了。

记得每次处理完之后记得把过程中的 p 和 span 都删除掉,这样应该能应付绝大多数的场景了。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号