开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

选中文字点击改变字体颜色js

在Web开发中，通过JavaScript来改变选中文字的字体颜色是一个常见的需求。以下是实现这一功能的基础概念、步骤和相关代码示例。

基础概念

选中文字：用户可以通过鼠标或键盘操作选中页面上的文字。
JavaScript DOM操作：JavaScript可以通过DOM（文档对象模型）来修改页面元素的样式。
事件监听：通过监听用户的点击事件，触发相应的JavaScript函数。

实现步骤

获取选中的文字：使用window.getSelection()方法获取用户选中的文字。
改变字体颜色：通过修改选中文字所在元素的样式来改变其颜色。

示例代码

以下是一个简单的示例，展示了如何实现选中文字点击改变字体颜色的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Font Color</title>
    <style>
        #text {
            width: 100%;
            height: 200px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="text" contenteditable="true">
        这里是一段示例文本。你可以选中其中的文字并点击按钮来改变其颜色。
    </div>
    <button onclick="changeColor()">改变颜色</button>

    <script>
        function changeColor() {
            // 获取选中的文字
            const selection = window.getSelection();
            if (selection.rangeCount === 0) return; // 如果没有选中任何文字，则直接返回

            // 获取选中文字的起始和结束节点
            const startNode = selection.getRangeAt(0).startContainer;
            const endNode = selection.getRangeAt(0).endContainer;

            // 遍历选中范围内的所有文本节点并改变其颜色
            const walker = document.createTreeWalker(startNode.parentNode, NodeFilter.SHOW_TEXT, null, false);
            let currentNode = walker.currentNode;
            while (currentNode !== endNode.parentNode) {
                if (currentNode === startNode || currentNode === endNode) {
                    currentNode = walker.nextNode();
                    continue;
                }
                currentNode.style.color = 'red'; // 改变颜色为红色
                currentNode = walker.nextNode();
            }
        }
    </script>
</body>
</html>

优势与应用场景

优势：
- 用户友好：允许用户直接在页面上操作，提升用户体验。
- 灵活性高：可以轻松扩展功能，如支持多种颜色选择或实时预览。
应用场景：
- 文本编辑器：允许用户在编辑时即时改变文字颜色。
- 注释工具：在文档中标记重要部分或评论。
- 教育平台：帮助学生高亮重点内容。

可能遇到的问题及解决方法

跨浏览器兼容性：不同浏览器对window.getSelection()的支持可能有所不同。可以通过检测浏览器类型和版本，使用相应的兼容性代码来解决。
性能问题：如果页面中有大量文本节点，遍历和修改样式可能会影响性能。可以通过优化算法或使用虚拟DOM技术来提高效率。

通过上述方法，你可以有效地实现选中文字点击改变字体颜色的功能，并根据具体需求进行扩展和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

VUE点击颜色选中

8273 0

小程序鼠标点击按钮（改变背景颜色字体）

目标需求：实现下图，给点击的view增加类，每次只能选择一个。主要思路：给点击的view增加类，依靠点击的index对state进行赋值。如果相同时，给该view增加类。效果演示： ?...79rpx; } .active-tag .flex-item { background: #03e2ff; color: #fff; border: 1rpx solid #fff; } js

3.9K2 0

css美化文字选中时的颜色

很多网站的选中文字特效都是使用的默认色，看就了就有点腻，今天教你如何个性的美化选中文字默认文字(选中底色为栗色，字体颜色为白色) /*栗色选中状态...color:#fff; } .text::-webkit-selection { background:maroon; color:#fff; } 下面再来看看如何假装让别人选中不了文字的...div onselectstart="return false;" style="-moz-user-select:none;" >假装你选不了我假装你选不了我，但是使用全选快捷键照样可以选中哦

2.2K2 0

单选框点击文字也能选中

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/139403.html原文链接：https://javaforall.cn

1.6K1 0

storyboard中改变TabBar的字体颜色

一、用storyboard建立的Tab bar，不能改变它的字体颜色。如果用storyboard建立TabBarController,那么想要选择Bar Tint改变字体的颜色是不行滴。...接下来就可以设置tabbar字体的颜色了。 ?

4.1K9 0

python改变输出字体颜色==>colorama

colorama是python第三方库中一个可以改变输出流颜色的玩意儿，安装可以通过： pip install colorama 简单介绍 from colorama import Fore,

6.2K2 0

WPF中ListView如何改变选中条背景颜色

三种颜色 IsMouseOver = Blue Select & Focus = Red Select & UnFocus = Yellow 大家也可以尝试下: <Window

3.5K7 0

Windows cmd窗口改变字体或背景颜色

Windows默认的cmd简直不能直视，做开发的同学避免不了经常要在本地乃至服务器运行命令，一个好看的命令窗口是否能给你枯燥的工作带来一丝神清气爽的感觉，接下来给大家介绍如何更改命令行颜色窗口上栏右击...，选择最后一个属性可以设置RGB颜色值，也可以在下边挑选自己喜欢的颜色。...也可以设置整个背景颜色，个人还是习惯用黑色

2.3K1 0

WPF DataGrid 改变单元格字体颜色

第一种方法，指定 DataGrid 里单元格的值是否符合用户自定义的条件，如果不，改变指定的颜色：前台XAML代码：这里的Foreground绑定后台生成的值 IA ，当IA符合用户定义的一些条件后，改变颜色...条件判断与颜色转变在下面的IValueConverter类中。...（如果要改变单元格的背景颜色，只需把前台XAML中的Foreground改为Background即可）后台代码： namespace WpfDataGridCellColors { /// <summary

3.1K1 0

鼠标经过超链接改变字体颜色方法

一、引入CSS .a{ color:#101010}/* 默许超链接字体色彩为蓝色 */ .a:hover{color:#F00}/* 默认超链接字体悬停时色彩为红色 */ .zhiding a{ color

2.4K2 0

css 去色_css按钮点击改变颜色

网站设计师在设计网页时，有时将一块图片设计成灰色，鼠标移上去，图片就有颜色。一般的逻辑是做两张图片，然后在鼠标上做图片切换事件。...grayscale(0); -o-filter: grayscale(0); filter:url(“about:blank”); filter: grayscale(0); filter: rgb; } JS...js”> <script type=”

3.5K2 1

Markdown设置字体大小、颜色...，CSDN博客编写设置字体大小、颜色、粗细。字体，文字背景设置。

正常我们写的文字默认是3号尺寸，但是字数多的话要想更美观设置小号字体更棒呢！小号字体字体颜色大号…字体 hello Boy!...华文细黑字体字体加粗字体标记绿色背景设置方法如图所示： ?

4.6K2 0

C语言教你怎么改变字体颜色

背景加强：数字128 或 BACKGROUND_INTENSITY 表示主要应用：改变指定区域字体与背景的颜色前景颜色对应值：　　0=黑色 8=灰色　　　...*/ #include #include void color(short x) //自定义函根据参数改变颜色 { if(x>=0 && x颜色 SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HANDLE), x); //只有一个参数，改变字体颜色...printf("此处为没调用颜色函数之前默认的颜色\n"); //调用自定义color(x)函数改变的颜色 color(0); printf("黑色\n"); color(1);...FOREGROUND_RED | FOREGROUND_INTENSITY | BACKGROUND_GREEN | BACKGROUND_INTENSITY); printf("红色字体

3.8K2 0

【Python制作词云】改变词云字体颜色

max_words=2000, # 设置最大现实的字数 stopwords=STOPWORDS, # 设置停用词 colormap=colormap, # 设置文字颜色...注释代码 #img_colors = ImageColorGenerator(backgroud_Image) #改变字体颜色 #wc.recolor(color_func=img_colors...) #字体颜色为背景图片的颜色 4....word_counts) #通过频率生成词云 print('开始加载文本') #img_colors = ImageColorGenerator(backgroud_Image) #改变字体颜色...总结利用 matplotlib 中 colors 这个类通过对自定义颜色列表的修改，词云字体的颜色就会发生改变当然也可以利用背景图片的颜色作为字体颜色

5.4K2 0

C语言怎么改变窗口的字体颜色和背景颜色？

如果学C语言久了，难免会对弹出的黑窗口感到厌烦，那这时候如果能改一下黑窗口的背景颜色和字体颜色，也许会给自己一个好一点的心情。废话不多说，现在开始教你怎么简单地改变窗口的字体颜色和背景颜色。...，我们就可以直接调用system(“color 07”)函数来改变背景色和字体色，其中，”color 07″中的0和7代表的是两个数字，上面第二点有说到，0是黑色，7是白色，这是调试窗口的默认颜色，我们可以将...”color 07″改成”color 12″就会看到背景色变为了蓝色，字体变为了绿色。...知道了原理后，你就可以不用继续往下看，直接用system(“color 前景色值背景色值”)函数来改变颜色了。...\n\n\n"); } 九、调用system(“color 07”)封装起来的函数每次都是全局变颜色，对于只想改变字体颜色，并且每次改变都不影响到上一次的颜色的话，可以参考下面的代码，运行结果跟上面的第九条稍微不一样

5.9K2 0

原生JS实现选中文字分享

当我们在阅读某些文章时，会看到一些比较精彩的语句急于分享，下面分享一个选中文字分享的功能，实现类似于下面的效果。 ? 以下是代码实现：选中文字分享 #p1 { width: 300px; margin: 50px;...ev.clientX; // 获得鼠标的y值存为top var top = ev.clientY; // 当选中的文字数量大于...oDiv.style.top = top + 'px'; }, 100); } else { // 当选中文字小于...oDiv.style.display = 'none'; } }; // 点击文字的时候

6.1K1 0

placeholder的字体样式改变，滚动条的颜色改变，ios日期兼容

placeholder: ::-webkit-input-placeholder { color: rgba(153, 153, 153, 0.541);f...

1.5K5 0

使用js获取选中的dom元素并改变选中（有序dom）的状态

2722 0

iOS 13 TabBar文字选中颜色PoP变为蓝色问题解决

今天突然发现一个问题，TabBar文字选中颜色Push一个页面，在pop回来之后就变成系统的蓝色的。

1.9K2 0

JAVA学习绘图颜色及其笔画属性设置字体显示文字

*/ public class DrawString extends JFrame{ private Shape rect;//矩形对象 private Font font;//字体对象...super.paint(g); Graphics2D g2=(Graphics2D)g;//强制类型转换 g2.setColor(Color.CYAN);//设置当前绘图颜色...g2.fill(rect);//填充矩形 g2.setColor(Color.blue);//设置当前绘图颜色 g2.setFont...(font);//设置字体 g2.drawString("现在的时间是", 20, 30);//绘制文本 g2.drawString(String.format

2K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭