可以使用 jquery-ui 调整文本大小吗？答案

【问题标题】：Can text be resizable using jquery-ui?可以使用 jquery-ui 调整文本大小吗？
【发布时间】：2011-09-28 11:09:41
【问题描述】：

p 标签中的 html 文本是否可以使用 jquery-ui 调整大小，或者 div 标签中没有 p 标签是否可以调整大小？我已经使用以下示例中的 jquery ui 调整了图像大小，但文本没有调整大小 http://jqueryui.com/demos/resizable/。

【问题讨论】：

标签： jquery jquery-ui jquery-plugins

【解决方案1】：

您可以使用调整大小事件处理程序。诀窍是如何计算新的字体大小。将此解决方案作为变体检查：

HTML：

<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
    <div id="content">Quis non magna sagittis, et cras tortor nunc? Enim, lectus et quis penatibus enim augue eros, dis sit sit urna cras placerat sociis porta</div>
</div>

Javascript：

var initDiagonal;
var initFontSize;

$(function() {
    $("#resizable").resizable({
        alsoResize: '#content',
        create: function(event, ui) {
            initDiagonal = getContentDiagonal();
            initFontSize = parseInt($("#content").css("font-size"));
        },
        resize: function(e, ui) {
            var newDiagonal = getContentDiagonal();
            var ratio = newDiagonal / initDiagonal;

            $("#content").css("font-size", initFontSize + ratio * 3);
        }
    });
});

function getContentDiagonal() {
    var contentWidth = $("#content").width();
    var contentHeight = $("#content").height();
    return contentWidth * contentWidth + contentHeight * contentHeight;
}

您可以在 jsFiddle 上查看此解决方案：jsFiddle link

【讨论】：

非常感谢。非常感谢您的帮助，我真的非常感谢。
好东西。我不太明白这个问题！
为什么要乘以 3？抱歉，我不明白它是从哪里来的？

【解决方案2】：

文本大小与 jQuery 无关。但是，您可以将 CSS 属性绑定到滑块。

$('#slideBar').slider({
    startValue: 12,
    minValue: 0,
    maxValue: 100,
    stop: function(e, ui) { 
        $("#text").css({fontSize: ui.value + 8});

    }
});

【讨论】：

非常感谢您的帮助。