使用JavaScript更改突出显示的文本的字体

Question

当我在文本区域中突出显示文本时，我想更改字体。 下面的函数将更改整个文本区域中的整个字体，而不是要更改的文本。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>E-commerce Website</title>
        <script>          
            function selectFont() {
                document.getElementById("note_header").style.fontFamily = "cursive";
            }
        </script>
    </head> 
    <body> 
        <select id="select_font" onchange="selectFont()">
            <option>Select a font</option>
            <option>Cursive</option>
        </select>
        <textarea id="note_header">Title</textarea>
    </body>
</html>

Answer 1

更改Textarea中文本的字体将不起作用，但可用于其他属性，例如颜色，光标等。

解决方法是使用内容可编辑的<div> 。 您可以将样式应用于span的内容后，使用window.getSelection获取选定的文本，然后使用<span>换行。 如下所示。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>E-commerce Website</title> <script> function selectFont() { selectedText = window.getSelection().toString(); NoteHeader = document.getElementById("note_header"); EditedText = NoteHeader.innerText.replace(selectedText, `<span style="font-family: cursive">${selectedText} </span>`); NoteHeader.innerHTML = EditedText; } </script> </head> <body> Highlight text and change font <br> <select id="select_font" onchange="selectFont()"> <option>Select a font</option> <option>Cursive</option> </select> <div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc"> Some Content </div> </body> </html>

Answer 2

没有直接的方法可以实现您的目标，但是您可以使用CSS伪元素::selection为选定的文本提供一些属性。 遗憾的是，无法更改font-family ，但是如果您只想以某种方式突出显示它，则可以更改的属性是：

颜色
背景颜色
光标
脱字色
大纲及其长手
文本修饰及其相关属性
文本强调色
文字阴影

 #note_header::selection { color: red; background: #eee; }

 <textarea id="note_header">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</textarea>

使用JavaScript更改突出显示的文本的字体

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-04-15 17:17:07

解决方案2
2 2018-04-15 16:35:46

使用JavaScript更改突出显示的文本的字体

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-04-15 17:17:07

解决方案2 2 2018-04-15 16:35:46

解决方案1
3 已采纳 2018-04-15 17:17:07

解决方案2
2 2018-04-15 16:35:46