我使用execCommand()来增加和减少选定/突出显示的文本的字体大小（当我们单击“增加”或“减少”按钮时，选定的文本字体大小将增加或减少2px）。
execCommand()在Mozilla Firefox中可以完美运行，但在Google Chrome中不能正常运行。如何“在Google Chrome浏览器中使用jquery增大和减小iframe广告代码中选中/突出显示的文本的字体大小”？
根据定义，FontSize受标准值的限制，范围为1到7，分别为“ xx-small”，“ x-small”，“ small”，“ medium”，“ large”，“ x-large”和“ xx-large” ' 所以：
$(document).ready(function(){
var fontSize = 3;
$('#decrease').click(function(){
if (fontSize > 1)
fontSize--;
document.execCommand("fontSize", false, fontSize);
});
$('#increase').click(function(){
if (fontSize < 7)
fontSize++;
document.execCommand("fontSize", false, fontSize);
});
})div{
margin-top: 16px;
padding: 4px;
border: solid 1px gray;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='decrease' type="button" value="Decrease Font">
<input id='increase' type="button" value="Increase Font">
<div contenteditable="true">Hello, this is some editable text</div>您可以使用hacky方法自定义此功能，该方法调用document.execCommand("fontSize", false, "1")，查找元素并对其进行更改：
$(document).ready(function(){
var fontSize = 16;
$('#decrease').click(function(){
if (fontSize > 6)
fontSize-=2;
document.execCommand("fontSize", false, "1");
resetFont();
});
$('#increase').click(function(){
if (fontSize < 64)
fontSize+=2;
document.execCommand("fontSize", false, "1");
resetFont();
});
function resetFont(){
$("font[size=1]").removeAttr("size").css("font-size", fontSize + "px");
}
})div{
margin-top: 16px;
padding: 4px;
border: solid 1px gray;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='decrease' type="button" value="Decrease Font">
<input id='increase' type="button" value="Increase Font">
<div contenteditable="true">Hello, this is some editable text</div>备注：上面的代码示例是为contenteditable div编写的，但从概念上讲，它与基于iframe的编辑器没有区别。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句