为鼠标选中文本添加样式、在鼠标位置插入节点

最新推荐文章于 2022-11-24 17:42:11 发布

hilter

最新推荐文章于 2022-11-24 17:42:11 发布

阅读量751

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/hilter/article/details/104277016

版权

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo ： 鼠标选中位置修改文字颜色以及在前面插入节点</title>
<style>
.addColor {
	color:red;
    font-size:18px;
    line-height:25px;
    padding-left:20px;
}
</style>
</head>
<body>
<h1>这是一个 h1 节点，进行插入节点和添加 span 标签更改选中文本的字体颜色为红色</h1>
<input type="button" id="insertNode" value="插入节点"/>
<input type="button" id="addStyle" value="鼠标选中变为红色"/>
<script src="jquery-2.1.1.js"></script>
<script>
$(function(){
	$("#insertNode").click(function(){
		var selObj=window.getSelection();
		var selRange=selObj.getRangeAt(0);
		//var selectedText=selObj.toString();
		var el = document.createElement('span');
		el.className='addColor ';
		el.id="test";
		el.innerHTML="a test";
		selRange.insertNode(el);
	});
		$("#addStyle").click(function(){
		var selObj=window.getSelection();
		var selRange=selObj.getRangeAt(0);
		//var selectedText=selObj.toString();
		var el = document.createElement('span');
		el.className='addColor ';
		el.id="test1";
		selRange.surroundContents(el);
	});
})
</script>
</body>
</html>

参考资料：getSelection、range 对象属性，方法理解，解释
 document.createElement（）的说明，详解

hilter

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
为鼠标选中文本添加样式、在鼠标位置插入节点

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Demo ： Textarea 元素的光标位置&lt...
复制链接

扫一扫