3

我有以下场景，我有许多链接，每当单击其中一个链接时font-size，line-heighttextarea 的 css 属性就会相应地设置。

这是一个 HTML。

<textarea cols="50" id="Target" style="width:400px; height:200px;" rows="20"></textarea>
<br />
<a class="changer" href="javascript:;" data-size="10">10</a><br />
<a class="changer" href="javascript:;" data-size="20">20</a><br />
<a class="changer" href="javascript:;" data-size="30">30</a><br />
<a class="changer" href="javascript:;" data-size="40">40</a><br />

这是一段 JavaScript 代码

$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px"
        });
    });
});

它在除 IE10 之外的所有浏览器中都能完美运行（未在 IE9 中测试，但它也是一个目标。）它font-size被应用但line-height只有在 textarea 的值以某种方式更改后才会生效。

这是工作演示。

  • 有什么解决方法吗？（以编程方式删除和插入文本是最不受欢迎的）
  • 有什么方法可以line-height自动实现吗？
4

2 回答 2

1

我刚刚找到了一种解决方法（小提琴）。创建一个包装器 div，您可以在其中定义 textarea 的尺寸。

<div id="txt_wrapper"><textarea id="Target">This is my text, it spans multiple lines. Line height is not applied immediately</textarea></div>

然后以 % 为单位定义 textarea 的大小：

#txt_wrapper {
    width: 400px;
    height: 200px;
}

#txt_wrapper textarea {
    width: 100%;
    height: 100%;
}

现在旋转将宽度增加到 100.01%，然后将其减小回 100%。因为 IE 需要这个改变才能让它运行（？？？）。

$(function(){
    var changewidth = 100;
    $(".changer").click(function(){
        var size = $(this).data("size");
        if(changewidth == 100) changewidth = changewidth + 0.01;
        else changewidth = changewidth - 0.01;
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px",
            "width": changewidth+"%"
        });
    });
});

我认为这只是一个错误，我完全不知道为什么会这样。它看起来像一个非常小的百分比范围内的变化，无法计算为可用的像素值，因此不会导致视觉变化仍然会在文本框上触发所需的“更改事件”。我根据msdn 论坛中的信息开发了这个解决方案。

于 2013-05-03T20:35:46.680 回答
1

因为line-height如果你改变一些东西就会更新，让我们给 IE 一些东西来触发更新：

$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        var text = $("#Target").text(); //grab current text
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px"
        }).text(text); //change text with text (same thing, just to trigger the update)
    });
});

在 IE9 和 Chrome 上测试。不幸的是，没有要测试的 IE10，但我认为它会起作用。

jsFiddle

更新： 我们可以做很多丑陋的事情。要使 IE 更新，我们需要真正改变它的宽度、高度或文本。

所以你也可以这样做：

$(function(){
    $(".changer").click(function(){
        var size = $(this).data("size");
        $("#Target").css({
            "font-size": size + "px",
            "line-height": (size + 5) + "px",
            "width":$("#Target").width()+1
        }).css({
            "width":$("#Target").width()-1
        });
    });
});
于 2013-05-03T20:19:12.637 回答