选择时更改按钮颜色答案

【问题标题】：Change Button color when selected选择时更改按钮颜色
【发布时间】：2015-09-01 21:44:52
【问题描述】：

我有带有按钮的 HTML 输出。我想让选定的按钮更改颜色以轻松显示正在查看的部分。

我试图做this thread 中的事情，但没有运气。好像没用过这个功能。

这是一个简单的 html 页面，其中我有按钮并尝试添加功能 focusMe。

    <HTML><HEAD>
    <STYLE type="text/css">

.btn {
    display: inline-block;
    border: #2e6da4;
    border-style: solid;
    border-width: 2px;
    width:190px;
    height:54px;
    border-radius: 6px;
    background: linear-gradient(#FFFFFF, #B0B0B0);
    font-weight: bold;
    color: blue;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 5px;
    vertical-align: middle;
}
.btn:hover {
    background: linear-gradient(#152B40, #152B40);
    color: white
    }
.btn:focus {
    background: linear-gradient(#152B40, #152B40);
    color: white
    }
.button-selected {
    border: 4px solid red;
}   

    </STYLE>

    <script type="text/javascript">

    function focusMe(button) {
    document.getElementsByClassName("button-selected")[0].className = "";
    button.className = "button-selected";
}

    </script>

</HEAD><BODY>

<div>

<button class='btn'>1</button>
<button class='btn'>2</button>
<button class='btn'>3</button>
<button onClick="focusMe(this);" >4</button>
</div>

</BODY></HTML>

我知道前 3 个按钮不会更改。只是在第 4 个按钮上尝试此功能。

谢谢！

【问题讨论】：

标签： javascript html button colors

【解决方案1】：

从document.getElementsByClassName("button-selected")[0].className = "" 引发的错误结果，第一次单击button document.getElementsByClassName("button-selected")[0] 未定义，尝试在不在DOM 中的元素上设置.className 时引发错误。

在button元素设置.className之前尝试使用if语句检查是否定义了document.getElementsByClassName("button-selected")[0]

<HTML>

<HEAD>
  <STYLE type="text/css">
    .btn {
      display: inline-block;
      border: #2e6da4;
      border-style: solid;
      border-width: 2px;
      width: 190px;
      height: 54px;
      border-radius: 6px;
      background: linear-gradient(#FFFFFF, #B0B0B0);
      font-weight: bold;
      color: blue;
      margin-top: 5px;
      margin-bottom: 5px;
      margin-right: 5px;
      margin-left: 5px;
      vertical-align: middle;
    }
    .btn:hover {
      background: linear-gradient(#152B40, #152B40);
      color: white
    }
    .btn:focus {
      background: linear-gradient(#152B40, #152B40);
      color: white
    }
    .button-selected {
      border: 4px solid red;
    }
  </STYLE>

  <script type="text/javascript">
    function focusMe(button) {
      var elem = document.getElementsByClassName("button-selected")[0];      
      // if element having class `"button-selected"` defined, do stuff
      if (elem) {
        elem.className = "";
      }
      button.className = "button-selected";
    }
  </script>

</HEAD>

<BODY>

  <div>

    <button class='btn'>1</button>
    <button class='btn'>2</button>
    <button class='btn'>3</button>
    <button onClick="focusMe(this);">4</button>
  </div>

</BODY>

</HTML>

这修复了功能。即使使用此功能，我也看到相同的行为正如我之前使用 CSS 所做的那样，额外的点击将删除选择按钮时更新的 CSS。知道我需要什么为此，所选按钮仅保持更新的颜色，直到选择了另一个按钮？

js 没有必要达到预期的结果。尝试使用 css 选择器 button:not(.btn) ， :focus 伪类来切换 border 的元素没有 .btn 类点击 .btn 元素

    <HTML>

    <HEAD>
      <STYLE type="text/css">
        .btn {
          display: inline-block;
          border: #2e6da4;
          border-style: solid;
          border-width: 2px;
          width: 190px;
          height: 54px;
          border-radius: 6px;
          background: linear-gradient(#FFFFFF, #B0B0B0);
          font-weight: bold;
          color: blue;
          margin-top: 5px;
          margin-bottom: 5px;
          margin-right: 5px;
          margin-left: 5px;
          vertical-align: middle;
        }
        .btn:hover {
          background: linear-gradient(#152B40, #152B40);
          color: white
        }
        .btn:focus {
          background: linear-gradient(#152B40, #152B40);
          color: white
        }
        button:not(.btn):focus {
          border: 4px solid red;
        }
      </STYLE>


    </HEAD>

    <BODY>

      <div>

        <button class='btn'>1</button>
        <button class='btn'>2</button>
        <button class='btn'>3</button>
        <button>4</button>
      </div>

    </BODY>

    </HTML>

【讨论】：

感谢您的回答。这固定了功能。即使使用此功能，我也看到与之前仅使用 CSS 时相同的行为，其中在选择按钮时，再次单击将删除更新后的按钮 CSS。知道我需要做什么才能使所选按钮仅在选择另一个按钮之前保持更新的颜色？再次感谢您！
再次感谢您的回复。但这不只是更新不带 btn 类的按钮吗？因此将更新带有红色边框的按钮 4。我想要做的是，一旦我点击一个按钮，即使我点击页面中的其他地方（那不是按钮），它也会保持新的背景颜色。
@AMRobert “这不只是更新不带 btn 类的按钮吗？所以将更新带有红色边框的按钮 4。” 不确定是否正确解释评论？跨度>
当点击按钮4时，它会有红色边框没有问题。我遇到的问题是，一旦您单击页面中的其他位置（不是按钮），红色边框就会消失。除非我单击另一个按钮，否则我希望保留红色边框。

【解决方案2】：

使用焦点伪类https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

.btn:focus {
    border: 4px solid red;
}

【讨论】：

【解决方案3】：

    <HTML>

    <HEAD>
      <STYLE type="text/css">
        .btn {
          display: inline-block;
          border: #2e6da4;
          border-style: solid;
          border-width: 2px;
          width: 190px;
          height: 54px;
          border-radius: 6px;
          background: linear-gradient(#FFFFFF, #B0B0B0);
          font-weight: bold;
          color: blue;
          margin-top: 5px;
          margin-bottom: 5px;
          margin-right: 5px;
          margin-left: 5px;
          vertical-align: middle;
        }
        .btn:hover {
          background: linear-gradient(#152B40, #152B40);
          color: white
        }
        .btn:focus {
          background: linear-gradient(#152B40, #152B40);
          color: white
        }
        button:not(.btn):focus {
          border: 4px solid red;
        }
      </STYLE>


    </HEAD>

    <BODY>

      <div>

        <button class='btn'>1</button>
        <button class='btn'>2</button>
        <button class='btn'>3</button>
        <button>4</button>
 <button>5</button>
      </div>

    </BODY>

    </HTML>

【讨论】：

您的答案与已经提供的答案相同，没有任何解释。