JavaScript实现选中文字变色：简单易用的代码示例

本文档主要介绍了如何使用JavaScript实现在网页上实现选中文本点击后改变字体颜色的功能。这个功能对于提高用户体验，特别是在编辑区域进行实时样式调整时非常实用。通过这段代码，我们可以看到开发者是如何结合HTML5和JavaScript来创建一个简单的文本编辑器插件。 首先，HTML部分定义了一个`<div>`元素，具有`id="editor"`属性，并设置其`contenteditable`属性为`true`，这意味着用户可以直接在这个区域内输入文本并进行编辑。另一个`<div>`包含了静态文本123456，以及一个`<input>`标签，用于触发改变字体颜色的操作。 JavaScript代码在`<script>`标签内实现，定义了一个名为`setColor()`的函数。该函数首先检查浏览器是否支持`document.all`（针对IE浏览器），如果支持，则使用`document.selection` API获取选中的文本范围。如果选中的文本不在`id`为"editor"的元素内，函数会直接返回，避免错误。 对于不支持`document.selection`的现代浏览器（如Chrome、Firefox等），则利用`window.getSelection()` API获取选区范围。在这里，函数创建了一个新的`<span>`元素，设置其CSS样式为红色（`color:#ff0000`），然后使用`surroundContents()`方法将选中的文本包裹在这个新创建的`<span>`元素中，从而改变选中文本的颜色。 这个例子展示了如何使用JavaScript的DOM操作和CSS样式来响应用户的交互，使用户能够动态地改变选中文本的颜色，增强了网页内容的可定制性和互动性。这对于任何需要用户在网页上进行文本编辑或格式调整的应用场景都非常有价值。