【天坑之路：用js给选中文字添加样式】的更多相关文章

天坑之路：用js给选中文字添加样式

前言 本例基于react,但是实际上就是用原生js做的.兼容性做到了IE9,但是按照这个思路做是可以做到IE8甚至更低的. 需求与最初的思路 当我拿到这个需求的时候以为很简单,就是可以给页面上的文章做记号,比如添加个下划线,或者背景涂色做成荧光笔的样子. 因为只需要兼容IE9,所以window.getSelection是支持的.(IE8及以下有其它的获取选中的方法) 那么思路就是选中文本,点击添加下划线后,通过 window.getSelection.getRangeAt(0) 拿到选中的文本对…

js 控制选中文字

 //脚本获取网页中选中文字 var word = document.selection.createRange().text;  //获取选中文字所在的句子 var range =  document.selection.createRange(); range.expand("sentence"); var sentence = range.text;   alert(word);//弹出选中的文字 alert(sentence );     例如页面上有一个文本输入框: <…

不让复制是不可能的----js获取选中文字

在360百科.知乎上经常会遇见禁止复制文本的情形,这能挡住一部分人复制,却挡不住程序员的复制. HTML都给我了,难道一小段文本我都拿不下来吗? F12打开控制台,然后选中文本,在控制台下粘贴以下代码,选中文本就自动跑到剪贴板上去了. /*获取选中的文字*/ sel = function () { if (window.getSelection) { return window.getSelection().toString(); } else if (document.getSelection…

js实现选中文字 分享功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>分享</title> <style> ::selection { background-color:#FDC4ED; } ::-webkit-selection { background-color:#FDC4ED; } ::-moz-selection { background-co…

用css改变鼠标选中文字的样式

打开一个页面,选中一段文字,会出现系统默认的蓝色背景和白色文字,如下图: 那么 这种选中效果我们怎么去自定制呢,比如我想让文字选中的时候背景是绿色,文字是白色 我们在css文件中插入如下代码: ::-moz-selection { background: #26a69a; color: #ffffff; } ::selection { background: #26a69a; color: #ffffff; } 再看一下效果: 这时候有些同学可能就开始想象了,是不是font-size,font-…

js实现分页列表添加样式

<script> var dUrl=window.location.href; var cUrl=(dUrl.substring(0, dUrl.indexOf('list_'))); var fUrl=(dUrl.substring(0, dUrl.indexOf('index.html'))); var oUrl=document.getElementById("w_lwnav"); var aUrl=oUrl.getElementsByTagName("a&…

原生js移除或添加样式

样式效果如下,点击商品详情 添加样式active 代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="&qu…

js 选中文字

选中文字,文字背景是蓝色 当前点击的元素: var e = e || event; var tag = e.target || e.srcElement; 选中文字:window.getSelection().selectAllChildren(tag); 取消选中的效果:window.getSelection().removeAllRanges();…

[js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)

该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路]Node.js实现简易的爬虫-抓取博客所有文章列表信息 [js高手之路]Node.js模板引擎教程-jade速学与实战1-基本用法 [js高手之路]Node.js模板引擎教程-jade速学与实战2-流程控制,转义与非转义 [js高手之路]Node.js模板引擎教程-jade速学与实战3-mixin…

marquee实现文字移动效果;js+div实现文字无缝移动效果

1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="this.stop()" onmouseout="this.start()" > <p style="letter-spacing:2px;width: 1px;"> 欢迎您登录拜博医疗口腔集团内部网 </p> </marqu…