我正在尝试动态更改文本框的对齐方式，但它不起作用。但是，如果我放弃加载工作正常的小部件。
代码; 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";
}
您可以使用::-ms-value伪元素修复此错误。您需要添加一些填充以触发重绘。由于它是伪元素而不是您添加填充的实际元素，因此看起来它不会改变输入的实际宽度。它还具有不适用于非 IE 浏览器的优点。
CSS：
.update::-ms-value {
padding-right: 1px;
}
JS：
document.getElementById('text1').className += "update";
当然，您希望将 text1 元素存储在一个变量中，这样您就不必每次都调用 getElementById。添加text-align: left;via CSS 也会更好，而不是直接调整样式对象。
试试这个代码。希望它可以帮助您找到一个好的解决方案。我将宽度设置为零值，然后使用计时器将宽度设置为前一个值以使其再次渲染。
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);
试试这段代码，它适用于 IE：
Javascript：
document.getElementById('btn').onclick = function(){
console.log(document.getElementById('text1').style.textAlign);
document.getElementById('text1').style.textAlign = "left";
}