我试图动态改变文本框的对齐方式,但它不起作用。但是,如果我放弃加载的小部件,工作得很好。
代码;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浏览器。
.update::-ms-value {
padding-right: 1px;
}
JS:
document.getElementById('text1').className += "update";
http://jsfiddle.net/yHnLK/22/当然,您希望将text1元素存储在一个变量中,这样您就不必每次都调用getElementById。通过CSS添加text-align: left;
也会更好,而不是直接调整样式对象。
试试下面的代码。希望它能帮助你找到一个好的解决方案。我将宽度设置为零值,然后使用计时器将宽度设置为之前的值,以使其再次渲染。
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/试试这段代码,它可以在IE中工作:
Javascript: <>之前document.getElementById('btn').onclick = function(){
console.log(document.getElementById('text1').style.textAlign);
document.getElementById('text1').style.textAlign = "left";
}
之前MDN CSS属性参考