高亮显示时编辑文本大小和颜色

edit text size and color when highlight

本文关键字：颜色 文本 显示 编辑 高亮      更新时间：2023-09-26

是否可以在高亮显示时更改文本颜色、大小和字体我试图看看如何在不经过class和id的情况下做到这一点这可能是吗

我所需要的只是脚本，剩下的就是我的脚本

 $("#fs").change(function() {
//alert($(this).val());
$('.item1').css("font-family", $(this).val());
 });
$("#size").change(function() {
$('.item1').css("font-size", $(this).val() + "px");
});

 $('.foo').click(function(){
$('.item2').css("color", $(this).attr('data-color'));
 });

不幸的是，没有现成的解决方案来实现这些功能。但是，您仍然可以将document.getSelection()与关键事件（如mouseup）一起使用，以实现您想要的目标。

<label>Highlight any text from this sentence</label>
<br>
<label>Highlight any text from this sentence</label>
$(document).on('mouseup',function(e) // delegate a mouseup event on the document
{   
  // locate the target element using e.target
  $(e.target).html($(e.target).html().replace(document.getSelection(), '<span class='"highlighted'">' + document.getSelection() + '</span>')); // replace the html by replacing the selected text via document.getSelection() with a html enclosed text.
});

示例：https://jsfiddle.net/DinoMyte/ez8cgsx7/6/

相关文章：