Question

我在IE10中有一个textarea，我试图通过一些jQuery滑块和按钮更新样式。

IE 10中存在2个问题

字体未按正确方向更新且忽略行高
更改对齐所需的按钮仅在用户开始编辑textearea的内容而不是直接编辑时才起作用。

Firefix和Chrome中不会出现这两个问题

我使用以下jQuery命令来更新样式

$("#area").css('font-size', fontSize + "px");
$("#area").css('line-height', lineHeight + "px");

Answer 1

好吧我不知道为什么IE会如此抵制变革，但确实如此。除非必须，否则IE不喜欢做任何事情。因此，要解决此问题，您必须通过将其设置为var来获取其中的文本，然后将其全部重新输入，以便IE看到更改然后更新。

所以这是你小提琴的代码......

$("#sliderFontSize").slider({
    range: "min",
    min: 10,
    max: 100,
    step: 10,
    slide: function (event, ui) {
        var fontSize = ui.value;
        var lineHeight = (fontSize * 1.3);
        $("#area").css('font-size', fontSize + "px");
        $("#area").css('line-height', lineHeight + "px");
    }
});

$("#alignLeft").click(function() {
    $("#area").css('text-align','left');
});

$("#alignRight").click(function() {
    $("#area").css('text-align','right');
});

所以你需要做的就是添加......

var currentText = $("#area").text();
$("#area").text(currentText);

点击您的点击功能...

$("#alignLeft").click(function() {
    $("#area").css('text-align','left');
    var currentText = $("#area").text();
    $("#area").text(currentText);
});

$("#alignRight").click(function() {
    $("#area").css('text-align','right');
    var currentText = $("#area").text();
    $("#area").text(currentText);
});

应该这样做。

只有在IE中编辑后，才能在textarea样式上更新Javascript

1 个答案: