首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Window.getSelection()加粗/取消加粗所选文本

使用Window.getSelection()加粗/取消加粗所选文本是通过JavaScript中的DOM方法来实现的。该方法返回一个Selection对象,表示用户选择的文本范围。

要加粗所选文本,可以使用以下代码:

代码语言:txt
复制
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var span = document.createElement("span");
span.style.fontWeight = "bold";
range.surroundContents(span);

上述代码首先获取用户选择的文本范围,然后创建一个<span>元素,并设置其样式为加粗。最后,使用range.surroundContents()方法将选中的文本包裹在<span>元素中,从而实现加粗效果。

要取消加粗所选文本,可以使用以下代码:

代码语言:txt
复制
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var span = document.createElement("span");
span.style.fontWeight = "normal";
range.surroundContents(span);

上述代码与加粗操作类似,只是将<span>元素的样式设置为正常字体(即取消加粗)。

这种方法适用于前端开发中需要对用户选择的文本进行样式修改的场景,比如富文本编辑器、文章阅读器等。

腾讯云相关产品中,与前端开发和云计算相关的有云服务器(CVM)、云函数(SCF)、云存储(COS)等。具体产品介绍和链接地址可以参考腾讯云官方文档:

  • 云服务器(CVM):提供弹性计算能力,支持多种操作系统和应用场景。产品介绍
  • 云函数(SCF):无服务器函数计算服务,支持事件驱动的函数计算模型。产品介绍
  • 云存储(COS):提供安全、稳定、低成本的对象存储服务,适用于图片、音视频、文档等数据的存储和管理。产品介绍

以上是对使用Window.getSelection()加粗/取消加粗所选文本的完善且全面的答案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Fabric.js 让用户手动加粗文本

    本文简介 点赞 + 关注 + 收藏 = 学会了 本文介绍 Fabric.js 的 IText 在画布上如何让用户手动加粗文本。...效果如图所示: 要实现2种操作 全文加粗加粗选中的文字 如果你还不清楚 Fabric.js 有什么用,我强烈推荐你阅读 《Fabric.js 从入门到目中无人》 。...全文加粗 只需把 IText 的 fontWeight 属性设置成 bold 即可实现加粗。 如果想变回默认样式,可以将 fontWeight 设为 normal 。...Fabric.js 自由绘制圆形》 将“框选”动作改造成自由绘制圆形 《Fabric.js 3个api设置画布宽高》 宽高设置并不是在初始化是才能进行的,本文介绍3种方法设置画布宽高,让你的画布更容易适配不同的使用场景...种方法(带过渡动画)》 一键摆正被你旋转过的元素 《Fabric.js 将本地图像上传到画布背景》 除了在初始化时设置画布背景外,我还做了本地上传背景的功能,让画布在运行时也能修改背景图 《在 Vue3中使用

    3.5K30

    前端富文本基础及实现

    文本输入模式实现 实现前端富文本编辑器首先要实现文本输入,一般常用两种方式实现。 iframe 第一种方式是使用 iframe 标签。...文档变成可编辑后,就可以像使用文字处理程序一样编辑文本。 效果如图: 元素设置 contenteditable 第二种方式是使用 contenteditable 属性指定 HTML 文档中的元素。...富文件选区 富文本编辑中我们在进行编辑时首先会先选择一块文本区域(即选区),比如选择一段文字并进行字体加粗等操作,那么选区本身包含了哪些信息呢,下面为大家简单介绍一下。...效果如图: 插入逻辑代码如下: const insert = () => { // 删除所选内容 window.getSelection().deleteFromDocument(...颜色值字符串(IE 使用这个命令设置文本背景色) bold 切换选中文本的粗体样式 null createLink 将选中内容转换为指向给定 URL的链接 URL 链接值,至少包含一个字符 fontSize

    4.5K50

    【富文本】268- 富文本原理了解一下?

    但我自己对富文本又没什么了解,所以顺带稍微看了下富文本的实现方式,特此来沉淀一下,还是那句话不喜勿喷哈?。 ok,这里先简要说下为什么会有富文本这种东西吧?!...document.execCommand 方法 既然我们可以对上面的 div 随意编辑,那具体怎么编辑呢,目前好像也还是只能输入文本,要怎样才能进行其他操作呢(比如加粗、倾斜、插入图片等等)??...我们简要列举下它的几个使用方式,大家就知道怎么用了?...目标 开篇一顿扯,下面让我们抓紧时间做一个属于自己的富文本吧?,大概会包含以下几个功能:加粗、段落、H1、水平线、无序列表、插入链接、插入图片、后退一步、向前一步等等。?,Let's do it!...加粗 现在假如我们要实现加粗的效果,该怎么做呢?

    2K40

    常用快捷键

    拖动某一项时按 CTRL 复制所选项。 拖动某一项时按 CTRL + SHIFT 创建所选项目的快捷键。...Ctrl+B:给选中的文字加粗(再按一次,取消加粗)。 Ctrl+C:将选中的文字复制到剪贴板中。 Ctrl+D:打开“字体”对话框,快速完成字体的各种设置。...Ctrl+I:使选中的文字倾斜(再按一次,取消倾斜)。 Ctrl+K:打开“插入超链接”对话框。 Ctrl+Shift+L:给光标所在行的文本加上“项目符号”。...Ctrl+Z:撤销刚才进行的操作(可以多次使用)。 Ctrl+0:将选中的文本每段前增加12磅的间距。 Ctrl+1:若选中的文本行距不是“单倍行距”,则将其快速设置为“单倍行距”。...Ctrl+Shift+F8:激活列选择功能,即通常所说的选择竖块文本(再按一次或按ESC键,取消该功能)。

    89820

    【Web技术】421- 富文本原理介绍

    但我自己对富文本又没什么了解,所以顺带稍微看了下富文本的实现方式,特此来沉淀一下,还是那句话不喜勿喷哈?。 ok,这里先简要说下为什么会有富文本这种东西吧?!...document.execCommand 方法 既然我们可以对上面的 div 随意编辑,那具体怎么编辑呢,目前好像也还是只能输入文本,要怎样才能进行其他操作呢(比如加粗、倾斜、插入图片等等)??...我们简要列举下它的几个使用方式,大家就知道怎么用了?...目标 开篇一顿扯,下面让我们抓紧时间做一个属于自己的富文本吧?,大概会包含以下几个功能:加粗、段落、H1、水平线、无序列表、插入链接、插入图片、后退一步、向前一步等等。?,Let's do it!...加粗 现在假如我们要实现加粗的效果,该怎么做呢?

    1K20

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

    在“日期选择器”窗口中,选择要加粗显示的日期,并单击“加粗”按钮。您可以选择多个日期。单击“确定”按钮关闭“日期选择器”窗口。保存并运行应用程序,您将会看到所选日期已经被加粗显示。...在事件处理程序中,我们获取所选日期范围,并使用MessageBox.Show方法输出所选日期范围的开始日期和结束日期。...为了更好的可读性,显示当前日期的文本也会变成加粗。ShowWeekNumbers属性用于指定是否在控件中显示周号。当ShowWeekNumbers属性为True时,在日历的左侧将显示周数。...3.具体案例以下是一个Winform中使用MonthCalendar控件的完整案例,演示了如何使用MonthCalendar控件来选择日期并将所选日期显示在Label控件中:创建一个新的Winform项目...在处理程序中,将所选日期的文本格式设置为Label控件的文本。运行程序,选择任意一个日期,所选日期的文本将会显示在Label控件中。

    69311

    【HTML】HTML 标签 ③ ( 文本格式化标签 | 加粗 | 斜体 | 下划线 | 删除线 | 标签属性 | 图像标签 | 图像标签属性 )

    文章目录 一、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 ) 二、标签属性 三、图像标签 HTML 常用的标签有如下类型 : 排版标签 文本格式化标签 ★ 图像标签 ★ 链接标签 ,...其中 链接涉及到 相对路径 与 绝对路径问题 ; 一、文本格式化标签 ( 加粗 | 斜体 | 下划线 | 删除线 ) ---- 文本格式化标签 : 对文字设置 粗体 , 斜体 , 下划线 , 删除线...效果 ; 粗体效果 : 下面两种标签都能实现 粗体效果 , 在 XHTML 中推荐使用 标签 ; 斜体效果...在 XHTML 中推荐使用 标签 ; 删除线效果 : 下面两种标签都能实现 删除效果 , 在 XHTML 中推荐使用 ..., 作用是 当图片无法显示时 , 显示该文本 ; title 属性 : 属性值是 文本字符串 , 作用是 鼠标在图片上悬停时 , 显示该文本 ; width 属性 : 属性值是 像素数值 , 作用是

    2.9K20

    最全电脑快捷键

    拖动某一项时按 CTRL 复制所选项。   拖动某一项时按 CTRL + SHIFT 创建所选项目的快捷键。  ...Ctrl+B:给选中的文字加粗(再按一次,取消加粗)。   Ctrl+C:将选中的文字复制到剪贴板中。   Ctrl+D:打开“字体”对话框,快速完成字体的各种设置。  ...Ctrl+I:使选中的文字倾斜(再按一次,取消倾斜)。   Ctrl+K:打开“插入超链接”对话框。   Ctrl+Shift+L:给光标所在行的文本加上“项目符号”。  ...Ctrl+Z:撤销刚才进行的操作(可以多次使用)。   Ctrl+0:将选中的文本每段前增加12磅的间距。   Ctrl+1:若选中的文本行距不是“单倍行距”,则将其快速设置为“单倍行距”。  ...Ctrl+Shift+F8:激活列选择功能,即通常所说的选择竖块文本(再按一次或按ESC键,取消该功能)。

    1.4K62

    MarkDown基础使用教程及使用jupyter notebook做笔记

    notebook做笔记 标题 一级标题使用1个# 二级标题使用2个# 三级标题使用3个# 四级标题使4用个# 五级标题使用5个# 六级标题使用6个# 文字 删除线 斜体 加粗 斜体+加粗 下划线 高亮...删除线 (使用波浪号) 斜体 这是用来 *斜体* 的 _文本_ 这是用来 斜体 的 文本 加粗 这是用来 **加粗** 的 __文本__ 这是用来 加粗文本 斜体+加粗 这是用来 ***斜体+加粗...*** 的 ___文本___ 这是用来 斜体+加粗文本 下划线 下划线是HTML语法 下划线 下划线(快捷键command+u,视频中所有的快捷键都是针对Mac系统,其他系统可自行查找) 高亮(需勾选扩展语法...) 这是用来 ==斜体+加粗== 的文本 这是用来 斜体+加粗文本 下标(需勾选扩展语法) 水 H~2~O 双氧水 H~2~O~2~ 水 H2O 双氧水 H2O2 上标(需勾选扩展语法) 面积...来取消显示为列表(用反斜杠进行转义) 代码 代码块 ​```语言名称 public static void main(String[] args) { } 行内代码 也可以通过 ``,插入行内代码

    1.4K40

    Markdown简易教程

    常用的一些基本标记格式 注意通用操作,一般一个标记后要带一个空格才能生效,如果不是会有说明,取消操作通常是使用两次回车即可退出到当前的标记之外....段落和换行符 段落,通常是一行或多行连续的文 本,使用回车键可以完成段落分隔,有些编辑器会忽略换行,可以使用shift + enter代替 标题 在文本的开头输入 1-6 个# 代表六个级别的标题,从...1-6 样式依次减小 引用 在文章中引用其他文章的内容, 在文本开头加入 > 我不怕千万人阻挡,只怕自己投降 — 五月天 «倔强» 列表 有序列表 : 使用 1....即可,回车自动调到第二条,想跳出继续回车即可 无序列表: 使用 * 或 + 跟有序列表一样的逻辑 任务列表 常用来表示事件是否完成,表现在列表前加一个符号,并且是可以交互的,完成后可以使用鼠标选中或取消...斜体加删除线 1 2 3 4 ~~**删除线加粗体**~~ ***斜体加粗体*** ~~*斜体加删除线*~~ //更多组合可以自己尝试一下 转义字符 有时只是使用符号的原始表达,并不想要变为样式,使用转义符

    98721

    C#记事本项目开发,一个可以实现批量操作的记事本!【附源码】

    基于C#开发的一款记事本软件,包括记事本文件的新建、打开、读取、保存、文本加粗、倾斜、字体、字号,记事本的批量操作等。 Hello!...很多小伙伴可能也都使用过记事本来记录一些自己比较重要或者容易忘记的事情,但是你知道它是怎么开发出来的嘛?...同样和之前大灰狼和大家分享的计算器项目一样,记事本项目也可以使用很多不同的语言开发,今天大灰狼就先和大家介绍一下使用C#开发记事本的思路和流程。...,字体加粗加粗是点击按钮取消加粗 //如果目前处于未加粗状态,点击进行加粗 if (textBox_Text.Font.Bold == false)...,点击取消加粗 else { textBox_Text.Font = new Font(textBox_Text.Font, FontStyle.Regular

    1.9K10

    筛选加粗字体格式的单元格的3种方法

    标签:Excel技巧 在工作表中有很多数据,一些数据所在单元格设置为加粗字体格式,现在想要筛选出所有这些加粗字体格式的单元格。 示例数据如下图1所示。...此时,所选数据区域中加粗字体单元格添加了背景色。 5.选择所有数据区域,在功能区“数据”选项卡中,单击“排序和筛选”组中的“筛选”命令,单击筛选下拉箭头,单击“按颜色筛选”,如下图3所示。...图3 此时,会自动筛选出所有加粗字体的单元格。 方法2:使用Get.Cell公式 GET.CELL()是一个Excel4宏函数,仍然可用。...下面来使用GET.CELL实现筛选加粗字体单元格。 在功能区“公式”选项卡中,单击“定义的名称”组中“定义名称”命令。...方法3:使用VBA 按Alt+F11组合键,打开VBE,输入代码: Function BoldFont(CellRef As Range) BoldFont = CellRef.Font.Bold

    3.7K30

    【OneNote Mobile】 如何处理便签内容的格式?

    对于OneNote Mobile的使用,本文讲解如何处理便签内容的格式。 1. 在Windows Phone 7设备的首页,用手指进行水平左移操作,进入应用程序列表,找到Office ?...用手指拖动选中文字两边的箭头,使其覆盖需要进行格式编辑的全部文本,这里以语句“Windows Phone 7”为例,如图4所示。 ? 图4:选中需要格式编辑的内容 5....在format页面中,选择需要的格式,包括字体加粗 ? ,斜体 ? ,下划线 ? ,删除线 ? 和高亮背景色,如图6所示。 ? 图6:format菜单的选项 7....分别进行加粗和高亮背景色这两个格式效果设置,回到note编辑页面,其效果如图7所示: ? 图7:字体加粗和高亮背景效果 8....如果需要取消格式,则在选中对应的文本内容以后,进入format页面,点击已经选择的格式效果,将其关闭。 ?

    2.1K70
    领券