Question

嘿伙计们在使用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>

PLs帮帮我。谢谢你。

Answer 1

将onclick更改为onchange

http://jsfiddle.net/wQWdg/

这适用于所有浏览器

function getElementsByClassName(className) {
    if (document.getElementsByClassName) {
        return document.getElementsByClassName(className);
    }
    else {
        return document.querySelectorAll('.' + className);
    }
}

如何使用getElementsByClassName？

1 个答案: