代码之家 › 专栏 › 技术社区 › Kacper G.

JavaScript-增加contenteditable div中所选内容的字体大小

jquery javascript

Kacper G. · 技术社区 · 8 年前

我正在使用WYSIWYG编辑器,该编辑器具有按钮增量FontSize(如在MS Office中)。我试图让这个按钮工作,但没有成功。每次选定的所有元素都具有相同的字体大小。以下是示例:

<div contenteditable="true">
    <p>
         Some
         <span style="font-size: 20pt">Text</span>
         <span style="font-size: 32pt">Some</span>
         Text
    </p>
</div>

下面是我的部分代码

var html = $(rangy.getSelection().toHtml());
var firstValue = html.find('.fontSize').first().css('font-size').replace('px', '');

html.find('.fontSize').each(function () {
    $(this).css('font-size', parseInt(firstValue) + 1);
});

当我选择所有文本并单击此按钮时 spans 具有相同的字体大小(例如21pt,因为我的函数只带第一个 span 考虑在内)。那个么,我如何编写可以分别增加每个元素字体大小的脚本(使用JavaScript或/和JQuery)?谢谢你的帮助。

1 回复 | 直到 8 年前

spectacularbob 8 年前

您正在获取第一个跨度的值,并将其存储在 firstValue 然后将所有跨距的字体大小设置为 firstValue + 1 。因为您的第一个跨度是20px,所以所有内容都设置为21px

因此,如果您试图在单击按钮时将每个跨度增加1px,您可以这样做:

html.find('.fontSize').each(function () {
    var oldValue = $(this).css('font-size');
    $(this).css('font-size', parseInt(oldValue) + 1);
});

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前