如何使用 将字体大小更改为 30px（例如）document.execCommand？
这：
document.execCommand("fontSize", false, "30px");
不起作用，因为在函数 execCommand 的第三个参数中，它只允许我输入一个介于 1 到 7 之间（包括 1 到 7）的值。
document.execCommand() FontSize 以像素为单位？
IT技术
javascript
editor
execcommand
2021-02-24 08:56:00
6个回答
这是FontSize命令的限制。我能想到的有多种选择：
- 您可以改用 CSS 类并使用我的Rangy库的CSS 类应用程序module；
- 您可以使用一种hacky 方法，例如调用
document.execCommand("fontSize", false, "7");然后查找命令创建的元素并根据需要更改它们。参见示例：http : //jsfiddle.net/S3ctN/。这显然取决于<font>文档中没有其他大小为 7 的元素，并且还依赖于浏览器使用<font>字体大小的元素，似乎他们都这样做。
功能
var execFontSize = function (size, unit) {
var spanString = $('<span/>', {
'text': document.getSelection()
}).css('font-size', size + unit).prop('outerHTML');
document.execCommand('insertHTML', false, spanString);
};
执行
execFontSize(30, 'px');
作为第二个答案，建议在 execcommand 之后运行一些 jquery 并用您自己的标记替换标记。
只需将 elem 替换为您的元素并使用所需的值编辑字体大小。
jQuery("font[size]", elem).removeAttr("size").css("font-size", "10px");
只需用 css 覆盖它：
font[size='7']{
font-size: 20px; // or other length unit
}
或者，如果您使用 scss，您可以使用循环来生成从 1 到 7 的所有选择器：
@for $i from 1 to 7 {
font[size='#{$i}']{
font-size: $i * 2vw
}
}
这是一个比这里提出的许多解决方案更好的解决方案，因为它直接从所选文本中获取要更改字体大小的元素。
因此，它不必浏览 DOM 来获取正确的元素，也不需要禁止使用特定的 fontSize（7，如已接受答案的第一个选项和其他答案中所建议的）。
function changeFont() {
document.execCommand("fontSize", false, "7");
var fontElements = window.getSelection().anchorNode.parentNode
fontElements.removeAttribute("size");
fontElements.style.fontSize = "30px";
}
总之，我们只是使用 execCommand 用 span 包装选择，以便随后对 getSelection() 的调用将突出显示的 span 作为 parent 。然后我们只需将 fontSize 样式添加到该标识的跨度。
在这里，当我们使用 fontSize 命令时，它不会被包裹在 a 中<span>，而是包裹在 a 中<font>。
但这是一个通用方法，它可以与 execCommand 的任何命令一起使用，后者被用作一种方便的方式，即使在不同的元素之间也可以包装所选内容。
这是一个现场演示