如何让网页字体元素变得可以选择JS的 onselectstart, style的 user-select:none

允许网页字体选择的JS实现
该博客介绍了如何使用JavaScript使网页中的字体元素变为可选中状态。通过设置`userSelect`属性为空,并覆盖`onselectstart`事件为返回`true`,实现了对class为`practice-item`的元素的文字选择功能。

问题描述:

如何让网页字体元素变得可以选择。

在这里插入图片描述
其渲染出来的代码是这样的:
在这里插入图片描述

问题解决:
这个代码就是用 JS 把 onselectstart 变成 return true 外加
style 里面的 user-select: 不见
再严一点, 把 unselectable 里面的 on 变成 off

所以JS 如下, 因为有大量class 为 practice-item 元素

let practice_item = document.getElementsByClassName("practice-item");
let practice_item_length = practice_item.length;
for (let i = 0; i < practice_item_length; i++) {
	practice_item[i].style.userSelect = "";
	practice_item[i].onselectstart = function () {
		return true;
	}
}

结果会这样: 但是没有关系,已经可以对该元素的文字进行选择了。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值