开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

更改TextRange字体颜色，但不更改将在其旁边书写的文本

基础概念

TextRange 是一种用于处理文本对象中特定部分的对象，常用于网页设计和脚本编写中。它可以用来设置或获取文本的样式属性，如字体颜色、大小等，而不影响其他文本。

相关优势

精确控制：允许开发者对文档中的特定文本片段进行样式设置，而不是整个文档或元素。
灵活性：可以在不改变其他文本的情况下，动态改变文本的颜色或样式。
交互性：结合事件处理器，可以实现用户交互时文本样式的变化。

类型

基于DOM的TextRange：在浏览器环境中，可以使用JavaScript的DOM API来创建和操作TextRange对象。
基于CSS的TextRange：通过CSS选择器可以实现对特定文本的样式控制，虽然不是直接的TextRange对象，但可以达到类似效果。

应用场景

富文本编辑器：在编辑器中，用户可以选择文本并改变其颜色，而不影响其他文本。
动态内容展示：根据用户的操作或数据的变化，动态改变部分文本的显示样式。
教育应用：在在线教育平台中，可以用不同颜色突出显示关键词或重要概念。

问题与解决方案

假设遇到的问题是：在更改TextRange字体颜色时，旁边的文本也被更改了。

原因

这通常是因为错误地选择了整个元素或没有正确地限定TextRange的范围。

解决方案

使用JavaScript的DOM API来精确选择需要改变颜色的文本范围。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Text Color</title>
<style>
  .highlight {
    color: red;
  }
</style>
</head>
<body>

<p id="demo">这是一个 <span>示例</span> 文本。</p>

<button onclick="changeColor()">点击改变颜色</button>

<script>
function changeColor() {
  var textNode = document.createTextNode("示例");
  var span = document.createElement("span");
  span.className = "highlight";
  span.appendChild(textNode);
  
  var p = document.getElementById("demo");
  var range = document.createRange();
  range.setStart(p.firstChild, 3);
  range.setEnd(p.firstChild, 5);
  
  var fragment = range.createContextualFragment(span.outerHTML);
  range.deleteContents();
  range.insertNode(fragment);
}
</script>

</body>
</html>

在这个示例中，我们创建了一个TextRange对象来选择“示例”这个词，并将其包裹在一个<span>元素中，然后通过CSS类.highlight来改变颜色。这样，只有“示例”这个词的颜色会被改变，而其他文本不受影响。

参考链接

相关搜索:如何从C#更改PowerPoint中TextRange的字体颜色？更改文本字体的颜色更改书写字体样式，而不更改以前写入的文本将更改文本颜色的链接更改文本框中的字体大小，但不能更改已有文本的字体大小更改Word文档中的文本字体颜色将字体的填充颜色更改为渐变如何根据星期几更改目标文本的字体颜色？Excel VBA:如何更改括号中文本的字体颜色？如何更改付款优惠券输入文本的字体颜色？如何更改matplotlib中所有文本的默认字体颜色？如何将文本颜色更改为冒号，然后将冒号后面的文本更改为不同的颜色更改IE中禁用的文本框中的字体颜色在dash的下拉列表中更改文本输入的字体颜色 CSS将元素的文本颜色从::after更改将WebView URL的文本颜色更改为白色在x秒后自动更改文本中单词的字体颜色在Excel中更改组合文本和公式的字体颜色如何以编程方式更改选定的文本字体/颜色？如何更改$之前命令提示符文本的字体颜色

相关搜索:

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

有帮助

没帮助

相关·内容

IT课程 CSS基础 022_文本、字体、链接

用于设置文本的首行缩进，适用于段落首行缩进的场景，避免在行内元素上使用。属性可以接受绝对值或相对值，绝对值单位包括像素 (px)、英寸 (in)、厘米 (cm)、毫米 (mm) 等，相对值单位包括 em、rem、vw、vh 等。

01

VBA专题09：基本的Excel图表编程代码

图表是数据可视化的一种常用呈现方式，VBA代码可以帮助我们自动化创建图表及对图表进行相关的操作，特别是当工作表中有大量图表需要进行重复修改时，VBA十分有用。

04

WORD的基本操作（二）

开始---查找替换---查找\替换\定位---在查找内容区域输入需要查找\替换的文本

02

Mac适用录音笔记软件Auditory

Auditory for Mac这是在一个应用程序内编写和记录语音的独特组合。不但拥有简洁漂亮的界面和功能齐全的文本格式，还提供了一个直观地界面，让你安心地进行文字创作。同时还具有录音功能，您可以在其中同时编写故事和录制音频。

03

CSS 基础

层叠样式表 (Cascading Style Sheets)，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言

04

【API使用系列】Core Text专题

https://developer.apple.com/library/mac/#documentation/Carbon/Reference/CoreText_Framework_Ref/_index.html

03

iOS 之-富文本 (NSAttributedString)

关于富文本能做什么我就不多说了，我们一般遇到的图文混排等，这个还是很好做到的。好，开讲了：在讲之前，我们得先明白他的属性和一些方法 1.属性: NSFontAttributeName 设置字体属性，默认值：字体：Helvetica(Neue) 字号：12 NSForegroundColorAttributeNam 设置字体颜色，取值为 UIColor对象，默认值为黑色 NSBackgroundColorAttributeName

06

更改PPT所有页面字体与页面颜色的技巧

在评估期间，无心插柳地探索到一个新技术，就是关于PPT课件统一更改字体颜色和页面背景颜色的问题。

03

项目实战：如何制作报表？

今天我会手把手教会你如何制作报表，在这之前，确保你已经学过了免费系列教程《7天学会商业智能(BI)-Power BI》下面的内容。

03

Python colorama | 详解终端漂亮的彩色打印怎么实现的

构建命令行程序很酷：命令行可以按照我们的设定完成相应的工作，相比 GUI 界面程序，无需花费大量时间设计 GUI 界面。但要使命令行程序更吸引人，仅使用普通的打印功能是无法实现的。

03

独家 | 几个Jupyter笔记本的使用技巧

作者：Zolzaya Luvsandorj翻译：陈之炎校对：赵茹萱本文约2400字，建议阅读5分钟本文为你介绍助力工作流文档化的几个实用技巧。

02

控制台输出带颜色的文字

所以,显示方式,字体颜色和背景颜色之间可以根据自己的需求进行互相搭配,但需要注意的是一头一尾的m不要忘了,一般情况下最后一个m前面的数字通常设置为0

03

R语言之词云：wordcloud&wordcloud2安装及参数说明

install.packages("devtools");

01

关于无障碍设计的七件事

作者简介：Jesse Hausler，Salesfoce无障碍设计专家。旨在通过教育大家「通用设计」来实现为所有用户而设计。

03

用于处理图表&图形的VBA代码大全3

图表标题是在图表顶部的文本。所有的代码以cht开始，假设已经使用上面介绍的代码引用了图表。

03

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

对我这篇文章【Python制作词云】分析QQ群聊信息，记录词频并制作词云的一个优化。

02

如何使用Python生成跑马灯视频

首先，我们需要安装opencv-python和Pillow两个库。您可以使用以下命令来安装它们：

02

23. Vue 自定义指令

可以看到上面的输入框在刷新页面并没有进行自动聚焦，那么这时候可以使用自定义一个focus()方法来处理。还有能否在刷新页面的时候，可以设置value在文本框中以及设置字体颜色呢？能否进而通过传参的方式设置字体颜色呢？

03

网页的修饰

总第61篇上一篇推送了网页的基本构成，链接地址：网页是怎么构成的？，这篇来讲讲网页的修饰，正如字面意思一般，本篇分享的内容是用来修饰网页的，是让网页变得更加好看。本文只是介绍一些基本的CSS，适合入门。 01|什么是CSS： CSS 指层叠样式表 (Cascading Style Sheets) 样式是用来定义如何显示 HTML 元素 02|CSS怎么用： CSS怎么用，也就是CSS的语法。CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。选择器通常是您需要改变样式的 HTML 元素

07

iOS 富文本编辑器

之前项目是用H5写的编辑器，效果不好，想着用原生自己好操作些，百度搜索一下，发现ZSSRichTextEditor很好用。项目需求就是类似于实现富文本功能,可以换行,左右对齐,修改字体颜色等,选择这个的原因不光因为它可以实现以上功能,他还可以把输入好的文字转换成html。但是ZSSRichTextEditor不能修改字体，中文输入可以,英文却不可以，查看代码： case ZSSFontFamilyPalatino: fontFamilyString = @"Palatino Linoty

08

富文本AttributedString的总结

AttributedString可以分为NSAttributedString和NSMutableAttributedString两种。在使用中通过将AttributedString赋值给控件的 attributedText 属性来添加文字样式。可设置的控件有UILabel、UITextField和UITextView。

02

2.CSS特性-CSS进阶

二、CSS特性 CSS具有两大特性：继承性层叠性 1.继承性 CSS的继承性，指的是子元素继承父元素的某些样式属性，例如：在父元素定义字体颜色（color属性），子元素会继承父元素的字体颜色。不是所有属性都具有继承性不过，并不是所有属性都具有继承性，如：padding、margin、border等就不具备继承性，况且要是这些属性也可以继承，那对于网页来说是一场噩梦。（1）具有继承性的属性 W3C规定，只有那些能让我们轻松书写的属性才可以继承。在CSS中，具有继承性的属性有

02

【CSS】课程网站开发示例 ① ( 文件目录结构准备 | CSS 属性书写顺序 - 重要 )

最终的展示效果如下 , body 中的文本 , 内外边距清除后 , 紧贴浏览器左上角 ;

02

IntelliJ IDEA常用设置和好用插件,不定时更新 2021-08-12更新

可用的预定义文件模板变量： {PACKAGE_NAME} – 将在其中创建新类或接口的目标包的名称。 {PROJECT_NAME} – 当前项目的名称。 {FILE_NAME} – 将要创建的 PHP 文件的名称。 {NAME} – 您在创建文件的过程中，在 “新建文件” 对话框中指定的新文件的名称。 {USER} – 当前用户的登录名。 {DATE} – 当前系统日期。 {TIME} – 当前系统时间。 {YEAR} – 本年度。 {MONTH} – 本月。 {DAY} – 当月的当前日期。 {HOUR} – 当前时间 {MINUTE} – 当前分钟。 {PRODUCT_NAME} – 将在其中创建文件的 IDE 的名称。 {MONTH_NAME_SHORT} – 月份名称的前3个字母。示例：1月，2月等。 {MONTH_NAME_FULL} – 一个月的全名。示例：1月，2月等 IntelliJ IDEA 为 PHP 包括模板提供了一组附加变量，即可被包含在其他 PHP 文件模板中的可重用片段的模板。内置的 PHP 包含模板用于生成文件头和 PHPDoc 文档注释。以下变量在 PHP 包含模板中可用： {NAME} – 将为其生成 PHPDoc 注释的类，字段或函数（方法）的名称。 {NAMESPACE} – 类或字段命名空间的完全限定名（无斜杠）。 {CLASS_NAME} – 定义了生成 PHPDoc 注释的字段的类的名称。 {STATIC}- 如果要为其生成注释的函数 (方法) 或字段为静态（static），则获取静态值。否则计算结果为空字符串。 {TYPE_HINT}- 提示函数 (方法) 的返回值以生成注释。如果无法通过函数 (方法) 的静态分析检测到返回类型，则计算结果为 void。 {PARAM_DOC} – – 参数的文档注释。计算为一组 @param 类型名称的行。如果要为其生成注释的函数不包含任何参数，则该变量将计算为空内容。 {THROWS_DOC} – 异常的文档注释。计算结果为一组 @throws 类型的行。如果要为其生成注释的函数不抛出任何异常，则该变量将计算为空内容。 {DS}- 一个美元字符 {CARET} – 指出了在生成和添加评论后插入符号的位置。

02

【Android】强大的SpannableStringBuilder

前言工作找完了，已经干了两个星期。虽然经常加班，不过相比之前的工作，现在过得更加充实、更有意义。现在有点空闲时间，继续我的分享之旅~~ 效果什么都不说，先看个炫酷的效果。效果 ‘什么，这也算

利润表分析怎么做才能更出彩，原来还能这么用Power BI（文末超大福利放送！！！）

很多人都认为Power BI 仅仅是一个可视化界面展示的工具，还不清楚Power BI 的每个模块是如何相互影响和关联的，或如何将每一模块结合起来运用到工作实践中去，最终通过数据“原材料”的高效加工为企业决策者做出一道“美味佳肴”？

02

JavaWeb day1 html快速入门

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页。

05

手把手教你使用 Python 制作贪吃蛇游戏

贪吃蛇游戏是有史以来最受欢迎的街机游戏之一。在这个游戏中，玩家的主要目标是在不撞墙或不撞墙的情况下抓住最大数量的水果。在学习 Python 或 Pygame 时，可以将创建蛇游戏视为一项挑战。这是每个新手程序员都应该接受的最好的初学者友好项目之一。学习构建视频游戏是一种有趣而有趣的学习。

03

JavaWeb day1 html快速入门

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页。

03

19. Vue 自定义指令

可以看到上面的输入框在刷新页面并没有进行自动聚焦，那么这时候可以使用自定义一个focus()方法来处理。还有能否在刷新页面的时候，可以设置value在文本框中以及设置字体颜色呢？能否进而通过传参的方式设置字体颜色呢？

01

图文混排

是基于 iOS 3.2+ 和 OSX 10.5+ 的一种能够对文本格式和文本布局进行精细控制的文本引擎。它良好的结合了 UIKit 和 Core Graphics/Quartz： UIKit 的 UILabel 允许你通过在 IB 中简单的拖曳添加文本，但你不能改变文本的颜色和其中的单词。 Core Graphics/Quartz几乎允许你做任何系统允许的事情，但你需要为每个字形计算位置，并画在屏幕上。 Core Text 正结合了这两者！你可以完全控制位置、布局、类似文本大小和颜色这样的属性，而 Core Text 将帮你完善其它的东西——类似文本换行、字体呈现等等。

03

如何使用markdown书写微信订阅号素材？

我们知道，运营微信订阅号难免与编辑器打交道，而微信自带的编辑器，又有诸多的限制，如果一个人，一天，发一篇文章，花费在编辑格式，美化页面上的时间，就太可惜了。

02

修改linux终端字体颜色

本篇博客将指导你如何修改Linux终端的字体颜色。我们将详细讨论配置终端字体颜色的方法，以及需要注意的事项，帮助你个性化定制终端外观。

01

【愚公系列】2023年11月 WPF控件专题 RichTextBox控件详解

WPF控件是Windows Presentation Foundation（WPF）中的基本用户界面元素。它们是可视化对象，可以用来创建各种用户界面。WPF控件可以分为两类：原生控件和自定义控件。

00

再次入门Markdown

一文入门Markdown 今天写的这篇文章是关于Markdown的。当我正在写这篇文章的时候，我其实也是在使用Markdown，所以这是一种很奇妙的感受：用Markdown写关于Markdown的文章

03

一文入门Markdown

一文入门Markdown 大家好，我叫Peter，今天给大家带来的一篇文章是关于Markdown的。当我正在写这篇文章的时候，我其实也是在使用Markdown，所以这是一种很奇妙的感受：用Markdo

00

使用VBA在PowerPoint中创建倒计时器（续）附示例PPT下载

其中，Now()引用当前日期和时间，将其存储在变量time中，然后加上30秒，因此将time称为未来时间。

04

iOS之NSAttributedString-------字符属性

NSAttributedString 字符属性字符属性可以应用于 attributed string 的文本中。 NSString *const NSFontAttributeName;(字体) NSString *const NSParagraphStyleAttributeName;(段落) NSString *const NSForegroundColorAttributeName;(字体颜色) NSString *const NSBackgroundColorAttributeNam

08

【Qt】使用QPalette设置QPlainTextEdit颜色时，不生效

最近在看《Qt5.9 C++开发指南》这本书，这本书可以从异步社区上下载源代码，不过需要注册有点麻烦：

02

图片处理软件：洋芋田图像工具箱3.5.1绿色版

3、如果你喜欢的话，还可以使用本软件为 BMP、GIF、PNG 文件添加你指定的日期。

02

sass基本运算

在Sass中，共有4种数字运算方式：加、减、乘、除。对于这4种运算方式，我们需要注意以下几点：

01

《iVX 高仿美团APP制作移动端完整项目》05 美食页商家推荐内容、分类、推荐商家制作

那么此时就应该对应的修改其内边距，内边距也是属于对应的文本组件内容，那么其背景色也会被作用，如果是外边距则是表示对某个方向的距离，编写对应的距离并不会增加其这个元素的厚度，在此需要更高内边距：

01

html——css基础

上一节我们讲了display的inline-block属性，但是我们在工作中很少用，因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: left代替。

05

HTML第三课——css【3】

上一节我们讲了display的inline-block属性，但是我们在工作中很少用，因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: left代替。 display的属性none lesson3.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Css</title> <meta name="keywords" content="key1, key2"> <meta nam

VBA技术：你需要知道的一些VBA操作形状的代码

在Excel中，可以通过功能区“插入”选项卡“插图”组中的“形状”库按钮在工作表中插入形状。可以使用形状来可视化数据、在形状中添加文本、作为执行宏代码的按钮，等等。

02

【程序猿硬核科普】推荐一款十分好用的终端工具XShell及其使用教程

本篇文章主要介绍一款十分好用的终端工具XShell及其使用教程，包括：使用XShell连接服务器、使用XShell服务器上传文件、XShell改变字体颜色以及解决计算机中丢失MSVCP110.dll问题的方法。

01

wordcloud词云图美化

之前的文章我们已经介绍了如何使用wordcloud库制作中英文词云图，并介绍了中英文停用词的使用方法，但如何美化词云图，例如换字体背景颜色，背景换成图片等，这些将在本篇文章进行详细介绍。

02

Word怎么做艺术字?这两种方法太好用了

1、选中Word里需要编辑为艺术字的文字，然后点击开始界面中的“文本效果和板式”图标，然后设置文字轮廓、阴影、映像、发光效果。（注：这里大家根据自己的需要设置效果就可以了。）

04

手把手教你零基础制作酷炫的标签云（词云）

很多时候，我们需要用炫酷的词云或者标签云来表达文本的重点含义。但是大多数工具都需要一定的编程基础，需要python来处理。而国外虽然有很多词云工具，但是对中文支持不够友好。今天重点介绍优词云。优词云页面非常简单，支持字体选择，支持词语大小调整，支持字体颜色，背景颜色的自定义。最最最重要的是，有很多好玩的模版供选择。来，快速进入优词云 www.uciyun.com。界面图如下：

01

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭