javascript - 如何在单击时切换元素的边框属性，而不取代其他元素？

Question

我正在尝试构建一个页面，人们可以在其中选择产品的颜色和容量。在给定时间只能激活一种颜色/容量，并且当选择一种颜色/容量时，其周围需要出现一个边框。

您可以在我下面的尝试中看到应用边框时其他元素被置换的问题。

我考虑过给所有元素 border: 2px solid rgba(0,0,0,0) 来解决置换问题，然后使用 javascript 在点击时更改边框属性，但我认为这可能不是一个优雅的解决方案。

这是 HTML...

<ul>
    <li onclick="changeName('Gold')"><div class="select-colour" id="gold"></div></li>
    <li onclick="changeName('Silver')"><div class="select-colour" id="silver"></div></li>
    <li onclick="changeName('Space Grey'); "><div class="select-colour" id="space-grey"></div></li>
</ul>

和 CSS...

ul li {
          width: 47px;
          height: 47px;
          border-radius: 12px;
          border: 2px solid rgba(0,0,0,0);
          padding: 3px;
       }

.select-colour {
          width: 45px;
          height: 45px;
          border-radius: 8px;
          border: 1px solid #c2bebb;
          -webkit-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
          -moz-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
          box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
        }

#gold {
          background-color: #f5e7dc;
      }

#silver {
          background-color: #e2e2e2;
        }

#space-grey {
          background-color: #232323;
            }

有没有人对处理此问题的最佳方法有任何想法？谢谢。

Answer 1

将 box-sizing: border-box 添加到 ul li 选择器中，如下所示:

ul li {
      width: 47px;
      height: 47px;
      border-radius: 12px;
      border: 2px solid rgba(0,0,0,0);
      padding: 3px;
      box-sizing: border-box;
   }

Box sizing: border-box 使元素的总宽度/高度包括边框和半径。

编辑:

文档的两个链接: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing https://www.w3schools.com/cssref/css3_pr_box-sizing.asp