Question

下面的代码是添加带文本的div和回调函数来增加文本大小但是它没有正常工作。我想调整我的div的大小，在这方面，文本应该随着它的高度和宽度而增加。

            $("<div>", { 'id' : "dyndiv" + count }) 
            .text($input.val()).addClass("draggable ui-widget-content HandleTopRowBorder").draggable({ 
              containment: '#containment-wrapper', 
              cursor: 'move', 
              delay: 200,
              distance: 30,
              opacity: 0.35 

            }).resizable({containment: '#containment-wrapper'},
                               start : function(event, ui)
                                      { ini_text_size_width = $(this).width(); },
                                      resize: function (event,ui)
                                       { fin_text_size_width = ($(this).width() / ini_text_size_width);
                                         $(this).css("font-size" ,( parseInt($(this).css("font-size")) +  (fin_text_size_width )) + "pt") } });   
     );

Answer 1

开始时，你最后会额外增加'}'和额外的'）'。这肯定会引起一个问题。

$("<div>", { 'id' : "dyndiv" + count }) 
            .text($input.val()).addClass("draggable ui-widget-content HandleTopRowBorder").draggable({ 
              containment: '#containment-wrapper', 
              cursor: 'move', 
              delay: 200,
              distance: 30,
              opacity: 0.35 

            }).resizable({containment: '#containment-wrapper'},
                               start : function(event, ui)
                                      { ini_text_size_width = $(this).width(); },
                                      resize: function (event,ui)
                                       { fin_text_size_width = ($(this).width() / ini_text_size_width);
                                         $(this).css("font-size" ,( parseInt($(this).css("font-size")) +  (fin_text_size_width )) + "pt") });

接下来，如果您仍然遇到问题，我建议您在功能中添加一些警报或console.log。这样你就可以准确理解发生了什么。

所以你可能会有这样的事情：

start : function(event, ui){
    ini_text_size_width = $(this).width();
  },
  resize: function (event,ui){
    console.log(ini_text_size_width) //This should tell you what your program thinks ini_text_size_width is at this point in time.
    fin_text_size_width = ($(this).width() /  ini_text_size_width);
    $(this).css("font-size" ,( parseInt($(this).css("font-size")) +  (fin_text_size_width )) + "pt")
  }

然后，你应该打开你的控制台，通过点击命令+ alt + j如果在chrome ..或下载firebug（它绝对值得），右键单击并点击inspect元素。

然后单击控制台，它应该报告您使用console.log（）的内容。它是处理javascript，html或css时非常有用的调试工具。

编辑：

Cyberfox的答案解释了为什么字体只在增长。

你需要做的就像他解释的那样：

fin_text_size_width = ($(this).width() /  ini_text_size_width);
$(this).css("font-size" ,( parseInt($(this).css("font-size"))*(fin_text_size_width )) + "pt") });

因为您想要计算百分比变化，然后将当前字体大小乘以。

我认为这应该有用。

Answer 2

除了@ BananaNeil的注释外，containment: '#containment-wrapper'还有一个超级}，它终止了传递给resizeable的选项对象。

进一步的代码：

fin_text_size_width = ($(this).width() /  ini_text_size_width);
$(this).css("font-size" ,( parseInt($(this).css("font-size")) +  (fin_text_size_width )) + "pt") });

只会增加字体大小，不会缩小它，因为将添加到字体大小。我相信你想要的是将font-size解析为浮点数并将其与比例因子相乘。

我提出了让Chrome或Firebug参与其中的建议，因为他们的开发者模式可能会很快显示出一些问题。提取和演示此问题的示例HTML页面可能有助于获得更好的答案。

如何相对于div增加文本高度和宽度

2 个答案: