第二次点击后重置按钮样式

Question

我有一个用于display/hide信息的按钮。当显示信息时，我有一种样式，当信息隐藏时，我有另一种样式。到目前为止，由于“button:focus”，我设法在单击按钮时更改了初始样式，但再次单击时样式保持不变。我基本上需要在每次单击时在这两种样式之间切换样式。有人可以帮助我吗？

这是我的 CSS 风格。


#button1 {
    height:50px;
    width:170px;
    border-style: solid;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 1px;
    font-family: "Roboto", serif;
    background-image: none;
    box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
    margin: 0 auto 0;
    border-color: white;
    color:white;
    background-color:rgb(4, 30, 78);
    border-radius: 30px;
  }

  #button1:hover {
    background-color: white;
    color:rgb(4, 30, 78);
    border-color:rgb(4, 30, 78);
    cursor:pointer;
  }

  #button1:focus{
    background-color: white;
    color:rgb(4, 30, 78);
    border-color:rgb(4, 30, 78);
    cursor:pointer;
  }

Answer 1

您可以在onclick事件上使用javascript来修改按钮类列表，请查看下面的示例

#button1 {
    height:50px;
    width:170px;
    border-style: solid;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 1px;
    font-family: "Roboto", serif;
    background-image: none;
    box-shadow: 2px 2px 8px 0 rgba(128,128,128,1);
    margin: 0 auto 0;
    border-color: white;
    color:white;
    background-color:rgb(4, 30, 78);
    border-radius: 30px;
  }
  
  #button1.active {
    background-color: white;
    color:rgb(4, 30, 78);
    border-color:rgb(4, 30, 78);
    cursor:pointer;
  }

<button id="button1" onclick="this.classList.toggle('active')">Click Me</button>

更多信息请查看Element.classList

Answer 2

首先，让我们稍微清理一下您的代码：

#button1 {
  display: block; /* You need this, if the element is <a>*/
  
  /*
   * height: 50px;  padding-block:25px;
   * width: 170px;  padding-inline:85px; width:min-content;
   */
  width: min-content;
  padding: 25px 85px;
  /*
   * margin: 0 auto 0;
   1. You don't need the last 0
   2. in this example margin: auto is enough
   */
  margin: auto;

  /*
   * border-style: solid;
   * border-color: white;
    let's make them one
  */
  border: medium solid white;

  border-radius: 30px;

  /*
  * font-family: "Roboto", serif;
  Roboto is a sans-serif font, I'm not sure you notice that or not. If I where you, I would use 'sans-serif' as it's fallback
  ALSO
  we can use the "font" shorthand
  */
  font: 700 0.875rem "Roboto", sans-serif;
  
  color: white;
  letter-spacing: 1px;
  text-transform: uppercase;

  /*
   * background-image: none; You Don't need it
   */
  background-color: rgb(4, 30, 78);
  box-shadow: 2px 2px 8px 0 rgba(128, 128, 128, 1);
}

#button1:hover {
  background-color: white;
  color: rgb(4, 30, 78);
  border-color: rgb(4, 30, 78);
  cursor: pointer;
  /* cursor: pointer;  moved to #button1*/
}

#button1:focus {
  background-color: white;
  color: rgb(4, 30, 78);
  border-color: rgb(4, 30, 78);
  /* cursor: pointer;  moved to #button1*/
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
  </head>

  <body>
    <div>
      <a id="button1">cam_gis</a>
      <!-- It's better to use class UNLESS you pretty sure why are you going to use an id -->
    </div>
  </body>

</html>

现在，让我们谈谈您用于“单击按钮时的初始样式”的:focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus.

MDN > :focus

The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.

MDN > :active

因此，我认为 :active 可能是更好的选择。

第二次点击后重置按钮样式

Reset button style after 2nd click

html

css

button