document.getElementById（'xs'）。clicked == true不起作用

Question

因此，我有这段代码来检查页面中是否单击了按钮，以及是否单击了按钮，将按钮的颜色更改为“ clicked”，所有其他颜色恢复为正常，但某种程度上这种情况没有得到真正的价值！

function SizeButtonStyle() {
  if(document.getElementById('xs').clicked == true){
    document.getElementById('xs').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('xs').style.backgroundColor = "white";
    document.getElementById('s').style.backgroundColor = "white";
    document.getElementById('s').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('m').style.backgroundColor = "white";
    document.getElementById('m').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('l').style.backgroundColor = "white";
    document.getElementById('l').style.backgroundColor = "rgb(0, 35, 102)";
    document.getElementById('xl').style.backgroundColor = "white";
    document.getElementById('xl').style.backgroundColor = "rgb(0, 35, 102)";
  }
}

<button id="xs" onclick="SizeButtonStyle()" class="size_button"><b>XS</b></button>
<button id="s" onclick="SizeButtonStyle()" class="size_button"><b>S</b></button>
<button id="m" onclick="SizeButtonStyle()" class="size_button"><b>M</b></button>
<button id="l" onclick="SizeButtonStyle()" class="size_button"><b>L</b></button>
<button id="xl" onclick="SizeButtonStyle()" class="size_button"><b>XL</b></button>

Answer 1

您可以将this关键字传递给该函数，并在函数内部引用该关键字以检查属性this。您可能还想更改元素的color

Answer 2

没有单击属性。因此，您将不得不收听click事件侦听器，并查看单击了哪个元素。

Answer 3

我希望此解决方案适合您。我添加了一个事件监听器，该事件监听器可切换一个您可以控制样式的类：

Answer 4

尝试使用此方法，在Jquery中使用类