当我突出显示 div 中的特定文本时，如何更改字体。当我从 Dropbox 中选择一种字体时，下面的代码会更改整个文本的字体。
function changeFont(font) {
document.getElementById("note_header").style.fontFamily = font.value;
}Highlight text and change font <br>
<select id="select_font" onchange="changeFont(this);">
<option value="Arial">Arial</option>
<option value="Sans Serif" selected>Sans Serif</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Impact">Impact</option>
<option value="Bookman">Bookman</option>
<option value="Garamond">Garamond</option>
<option value="Palatino">Palatino</option>
<option value="Georgia">Georgia</option>
</select>
<div contenteditable="true" id="note_header" style="width:200px; height:200px; border: 1px solid #ccc">
Some Content
</div>试图增强 Ankit 的答案，
这是一个不使用该replace()功能的解决方案。
Ankit 解决方案的问题在于，如果文本重复，则替换所选文本的第一次出现。
例如，当文本是“abc abc”并且我们选择了第二个时，它就是第一个更改了字体的文本。
⋅ ⋅ ⋅
下面的代码段使用选定的文本和选定的字体创建一个新的 html 元素，然后删除选择并在其位置插入新元素：（
请参阅代码中的注释）
function changeFont(font) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-family:' + font.value + ';';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
}.editable {
width: 360px;
height: 120px;
border: 1px solid #ccc
}Highlight text and change font <br>
<select id="select_font" onchange="changeFont(this);">
<option value="Arial">Arial</option>
<option value="Sans Serif" selected>Sans Serif</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Impact">Impact</option>
<option value="Bookman">Bookman</option>
<option value="Garamond">Garamond</option>
<option value="Palatino">Palatino</option>
<option value="Georgia">Georgia</option>
</select>
<div contenteditable="true" class="editable">
Some Content
</div>请注意，并非不必要地添加 jQuery。
（OP没有在他们的问题中使用它）
我希望它有帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句