Question

我正在尝试动态更改文本框的对齐方式，但它无法正常工作。但是，如果我通过加载正常工作的小部件。

的代码; HTML

 <input type="text" id="text1" style="text-align:center;width:80px" value="abc">
 <input type='button' id="btn" value="click">

JavaScript：

 document.getElementById('btn').onclick = function(){
    console.log(document.getElementById('text1').style.textAlign);
    document.getElementById('text1').style['text-align'] = "left";   
 }

Answer 1

您可以使用::-ms-value伪元素修复此错误。您需要添加一些填充，以便触发重绘。由于它是伪元素而不是实际元素，您也添加了填充，看起来它不会改变输入的实际宽度。它还具有不适用于非IE浏览器的优势。

CSS：

.update::-ms-value {
    padding-right: 1px;    
}

JS：

document.getElementById('text1').className += "update";

http://jsfiddle.net/yHnLK/22/

当然，您希望将text1元素存储在变量中，这样您就不会每次都调用getElementById。通过CSS添加text-align: left;也会更好，而不是直接调整样式对象。

Answer 2

试试这段代码。希望它能帮助您找到一个好的解决方案。我将宽度设置为零，然后使用计时器将宽度设置为先前的值，以使其再次渲染。

HTML：

<div>
<textarea name="text">WANDER LUST</textarea>
</div>
<div>
<button class="btn-text-align" data-rule="textAlign" data-value="left">Left</button>
<button class="btn-text-align" data-rule="textAlign" data-value="center">Center</button>
<button class="btn-text-align" data-rule="textAlign" data-value="right">Right</button>
</div>

使用Javascript：


(function($) {
    $('.btn-text-align').on('click', function(){
        $obj= $(this);
        rule= $obj.attr('data-rule');
        ruleValue= $obj.attr('data-value');
        textElement= $(':input[name="text"]')[0];
        textElement.style[rule]= ruleValue;
        width= textElement.style['width'];
        textElement.style['width']= '0px';
        timerElement = setInterval(function () {
            textElement.style['width']= width;
            clearInterval(timerElement);
        }, 10);
    })
})(jQuery);

http://jsfiddle.net/zLwq140x/

Answer 3

尝试此代码，它可在IE中运行：

JavaScript：

document.getElementById('btn').onclick = function(){
    console.log(document.getElementById('text1').style.textAlign);
    document.getElementById('text1').style.textAlign = "left";
 }

MDN CSS Properties Reference

IE10中文本框的动态对齐无效

3 个答案: