使用 getElementsByTagName 更改 <textarea> 的样式 文本从中心向左对齐

Question

我有一个脚本来更改文本区域的文本对齐方式，下面的 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 错误。谁能帮帮我？提前非常感谢。

附：该脚本的原因是因为textareas的原始内容需要居中，但是当用户开始使用showCenterTemplates()脚本从<select>中选择模板以动态填充到<textarea>中时，这些模板需要在<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、i 为 1 等），textbox[i] 表示数组中的一个位置
• 由于数组中填充了 HTML 元素，因此数组中的每个位置都是一个元素， 并具有样式属性