Question

我有4个具有相同ID的按钮（用于css目的）我想在单击按钮时突出显示该按钮。通过传递id它工作正常，但我想传递按钮的名称（唯一名称）。当我尝试getElementByNames（）时它不起作用。这是具有不同ID的代码，我想要这个用于不同的名称

    <html>
   <head>
<style type="text/css">

</style>
<script type="text/javascript">
    var buttonClicked = null;
  function highlight(id)
   {
    if(buttonClicked != null)
    {
        buttonClicked.style.background = "grey";
        buttonClicked.style.color="black";
    }

     buttonClicked  = document.getElementById(id);
    buttonClicked.style.background =  "blue";
    buttonClicked.style.color="white";
   }
</script>
</HEAD>
<BODY>
<table width="100%" cellspacing="0" cellpadding="3px">
    <tr>
        <td>
                <input type="button" value="BUTTON" id="select1" name="select1"  onclick="highlight('select1')">
        </td>
        <td>
                <input type="button" value="BUTTON" id="select2" name="select2" onclick="highlight('select2')">
        </td>
        <td>
 <input type="button" value="BUTTON" id="select3" name="select3" onclick="highlight('select3')">
 </td>
 <td>
<input type="button" value="BUTTON" id="select4" name="select4"  onclick="highlight('select4')">
        </td>
    </tr>
</table>
</BODY>
</HTML>

Answer 1

您的问题有点不清楚 - 您说＆＃34;我有4个ID相同的按钮＆＃34;但在你的代码中，他们有不同的ID。如果你确实这样做，那么就有4个具有相同id的按钮（用于css目的）＆＃34;然后：

如果要将CSS样式应用于多个元素，则应使用类而不是ID。然后，您可以为按钮使用唯一ID，现有代码也能正常运行。

<style>
.myclass {
    color: red; // CSS rules for all these buttons
}
</style>

<input type="button" id="select1" class="myclass" ...
<input type="button" id="select2" class="myclass" ...

Answer 2

如果要按名称选择元素，可以使用此代码：

buttonClicked  = document.getElementsByName(id)[0];

只要您可以保证名称将是唯一的，因为第一个元素将被采用，它可以正常工作。但它不是最好的方法......

Answer 3

当然Richie说，你应该使用css类来定义不同的id。无论如何，如果你想坚持使用相同的ID，你可以使用不同的方法：

<script type="text/javascript">
var buttonClicked = null;

function highlight(element) {
    if (buttonClicked != null) {
        buttonClicked.style.background = "grey";
        buttonClicked.style.color = "black";
    }
    buttonClicked = element;
    buttonClicked.style.background = "red";
    buttonClicked.style.color = "white";
}
</script>
<table width="100%" cellspacing="0" cellpadding="3px">
<tr>
    <td>
        <input type="button" value="BUTTON1" id="select1" name="select1" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON2" id="select2" name="select2" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON3" id="select3" name="select3" onclick="highlight(this)" />
    </td>
    <td>
        <input type="button" value="BUTTON4" id="select4" name="select4" onclick="highlight(this)" />
    </td>
</tr>
</table>

小提琴：http://jsfiddle.net/9nq39hov/

如何突出显示单击的按钮，而不传递按钮的ID？

3 个答案: