首页 > 其他分享 >createRange表示文档中的一个范围——用于js判断文字添加省略号情况

createRange表示文档中的一个范围——用于js判断文字添加省略号情况

时间:2024-02-28 13:58:44浏览次数:23  
标签:省略号 对象 js Range 文档 createRange document 方法

document.createRange() 是 JavaScript 中的一个方法,用于创建一个 Range 对象,表示文档中的一个范围。Range 对象通常用于选择文档中的一部分内容,然后对其进行操作。

它可以:

设置选中文本范围:可以使用 document.createRange() 方法创建一个 Range 对象,并使用 setStart() 和 setEnd() 方法设置选中文本的起始和结束位置。

插入新元素:可以使用 document.createRange() 方法创建一个 Range 对象,并使用 insertNode() 方法将新元素插入到文档中的指定位置。

获取特定元素的位置:可以使用 document.createRange() 方法创建一个 Range 对象,并使用 getBoundingClientRect() 方法获取元素在文档中的位置和大小信息。

这边 element 就是使用 range 对象的 getBoundingClientRect 获取到元素的宽高,同时因为得到的宽高值有很多位的小数,所以 element-plus 做了一个判断,如果小数值小于 0.001 就舍弃小数部分。

标签:省略号,对象,js,Range,文档,createRange,document,方法
From: https://www.cnblogs.com/zsnhweb/p/18040121

相关文章

  • sublime 格式化json
    sublime格式化json需要借助工具包prettyjson.具体步骤如下:打开sublime,使用快捷键shift+cmd+P打开输入框,然后输入install,选择installPackage然后输入:pretty,我们可以看到很多的格式化语言,选择JSON即可: 后台安装几秒到一分钟,打开sublimeText->preferences->packagesettin......
  • js调用斑马打印机打印二维码
    斑马打印机打印二维码项目(Web项目)功能中存在生成并打印二维码的功能,需要借助打印机打印出二维码。由于业务需求二维码需要打印在不干胶的材料上并可以进行粘贴,所以借助斑马打印机通过热敏不干胶纸进行打印。需要结合所使用的的斑马打印机的型号,去官网下载相关的浏览器打印插件。(......
  • el-tootip在只有超出显示省略号时启用在树形组件(带循环dom)的运用
    原理就是在鼠标浮动到el-tootip包裹的元素时判断该元素的scrollWidth(元素内容的实际宽度)有没有超过clientWidth(元素的可是宽度)超出时显示省略号并设置disabled属性为false否则为true代码如下:链接:https://www.jianshu.com/p/b39d2124d911<el-treeref="treeRef......
  • Java中使用Jsoup实现网页内容爬取与Html内容解析并使用EasyExcel实现导出为Excel文件
    场景Pythont通过request以及BeautifulSoup爬取几千条情话:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87348030Node-RED中使用html节点爬取HTML网页资料之爬取Node-RED的最新版本:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/124182289Jsoup......
  • 在spark sql中解析json格式数据
    一、实际的sql语句:selectapp_id,event_time, event, spm_b_code, spm_c_code, spm_d_code, spm_biz_type, user_id, user_id_type, seat_code, spm_content_type, sourcefromxxx_yyy_zzztlateralview_json_tuplet(t.ext_props,......
  • uni-app的renderjs示例 | app端使用window
    原文:https://juejin.cn/post/6974552469917401125<template><viewstyle="padding-top:200rpx;"><!--这里的:change:msg旨在于监听逻辑层的msg变化,有变化就调用renderjs内容--><!--这里要注意,render。receiveMsg中的render是下面renderjs定义的module名称-->......
  • Yaml与Json的对比
    YAML格式:server:#服务器配置port:8043#端口号为8043spring:#Spring配置datasource:#数据源配置url:jdbc:mysql://localhost:3306/hbs?serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=convertToNull&autoReconnect=true&useSSL=false&failOv......
  • python3的json数据库-TinyDB效率篇
    安装了这个TinyDB库后,我突然想到一般来说python执行的速度并不算高,那这个库写文件速度如何呢?测试代码如下:fromtinydbimportTinyDBimporttime#创建数据库对象db=TinyDB('db.json')milliseconds1=int(time.time()*1000)db.insert({'type':'apple','count':......
  • three.js使用 CSS2DRenderer
    导入 import{CSS2DRenderer,CSS2DObject}from'three/examples/jsm/renderers/CSS2DRenderer';functioncreateLableObj(text,vector){letlaberDiv=document.createElement('div');//创建div容器laberDiv.className='laber_name......
  • AngularJs 数据渲染完成之后,执行回调方法
     请求远程数据--》数据模型变化--》angularjs监控到模型变化--》重新渲染页面。 注册一个自定义的指令.directive('OnReanderFinsh',[function(){return{restrict:'A',link:function($scope,element,attrs,controller){......