0

嘿伙计们，我在使用 getElementByClassName 时遇到错误。我的意图是，我想通过从下拉列表中选择一个选项来更改多个 TEXT 的颜色，其中每个选项都有不同的颜色。

在这里，我为所有文本分配了一个 className。

这是我的代码。

<html>
   <head>
      <script type="text/javascript">
         function copyText(selectedElement) {
            var className = document.getElementsByClassName("incomeTypeSalary");
            for (i = 0; i < className.length; i++)

            {
               className[i].style.color = selectedElement.options[selectedElement.selectedIndex].style.color;
            }

         }
      </script>
   </head>

   <body>
      <div style="width:600px;border:1px solid black;float:left">
         <select width="200px" id="selectedElement" onclick="copyText(selectedElement)">
            <option style="color:red">Theta Saving Plan</option>
            <option style="color:green">Roth Plan</option>
            <option style="color:yellow">IRG Plan</option>
            <option style="color:PINK">II Plan</option>
         </select>
      </div>
      <div style="width:300px;border:1px solid black;float:left">
         <span style="padding-top:30px;font-size:24px;font-family:arial:" class="incomeTypeSalary">Contribution</span>
         <table style="padding-top:24px">
            <tr>
               <td>
                  <span class="incomeTypeSalary">Annual Salary</span>
               </td>
               <td>
                  <input type="text" style="width:81px; direction:rtl;">
               </td>
            </tr>
            <tr>
               <td>
                  <span class="incomeTypeSalary2">Annual Coomission</span>
               </td>
               <td>
                  <input type="text" style="width:81px; direction:rtl;">
               </td>
            </tr>
            <tr>
               <td>
                  <span class="incomeTypeSalary3">Annual Bonus</span>
               </td>
               <td>
                  <input type="text" style="width:81px; direction:rtl;">
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>

请帮助我。在此先感谢。

4

1 回答 1

1

更改onclick为onchange

http://jsfiddle.net/wQWdg/

这适用于所有浏览器

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    }
    else {
        return document.querySelectorAll('.' + className);
    }
}​
于 2012-04-15T06:44:46.423 回答