使用getElementsByTagName textAlign从中心到左侧更改<texarea>的样式

Question

我有一个脚本来更改textarea的文本对齐方式,其ID textbox1如下:

 // <![CDATA[
 function alignFix() {

 document.getElementById("textbox1").style.textAlign="left";

 }
 // ]]>

这是标记:

 <textarea cols="36" rows="25" readonly="readonly" id="textbox1" name="textbox" style="text-align: center;">dynamic text populates via another script unrelated to problem</textarea>

这是触发器:

 <select class="c9" onchange="showCenterTemplates(this); alignFix();">

它工作得很好.现在我有一个以上的textarea我需要这个脚本来工作,所以我认为这将是一个简单的转换document.getElementById,document.getElementsByTagName但我的无知/惊喜,这不是很好.

我搜索了问题和论坛以及Google,并找到了document.getElementsByTagName的实例,但不是我需要它的方式.

似乎在使用时getElementsByTagName,必须始终声明一个变量(任何人都可以确认这是否属实？)所以我试过:

 // <![CDATA[
 function alignFix() {

 var textbox = document.getElementsByTagName('textarea');
 style_textbox = textbox.style;
 style_textbox.textAlign="left";
 }
 // ]]>

但是style_textbox is null or not an object在测试时我遇到了错误.有人可以帮帮我吗？首先十分感谢.

PS脚本的原因是因为textareas的原始内容需要居中,但是当用户开始从使用脚本<select>动态填充的模板中选择模板时,这些模板需要在其中包含左对齐的文本.希望有道理.<textarea>showCenterTemplates()<textarea>

Answer 1

getElementsByTagName返回一个元素数组,因此你必须循环它:

var i,j, textbox = document.getElementsByTagName('textarea');
for (i=0, j=textbox.length; i<j; i++) {
    textbox[i].style.textAlign='left';
}

编辑:评论中的每个请求,一个简短的解释:

• 只要没有达到数组的大小,i就会从0(零)递增
• textbox是数组,textbox.lenght返回其大小
• 对于每个i(如在i中为0,我是1等)textbox [i]表示数组中的位置
• 由于数组中填充了HTML元素,因此数组中的每个位置都是一个Element,并且具有style属性