изменить стиль <texarea>, используя getElementsByTagName textAlign от центра к левому краю - PullRequest
Новая
       21

изменить стиль <texarea>, используя getElementsByTagName textAlign от центра к левому краю

2 голосов
/ 10 сентября 2011

У меня есть скрипт для изменения выравнивания текста для текстовой области с идентификатором 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();">

Работает просто отлично. Теперь у меня есть несколько текстовых областей, над которыми мне нужен этот сценарий, поэтому я подумал, что это будет простой переход с 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 при тестировании. Кто-нибудь может мне помочь, пожалуйста? Заранее большое спасибо.

P.S. Причина сценария заключается в том, что исходное содержимое текстовых областей необходимо центрировать, но когда пользователь начинает выбирать шаблоны из <select> для динамического заполнения в <textarea> с использованием сценария showCenterTemplates(), эти шаблоны должны выровненный по левому краю текст внутри <textarea> Надеюсь, что это имеет смысл.

1 Ответ

6 голосов
/ 10 сентября 2011

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 и т. Д.) Текстовое поле [i] представляет позицию в массиве
  • , так как массив заполнен HTML-элементами, каждая позиция в массиве является элементом, и имеет атрибут стиля
...