Javascript 重新建立单击按钮样式

我需要一些帮助：我做了三个按钮，一旦我点击其中一个，它的样式应该通过Javascript改变。这是有效的。但是，还有一些事情应该发生：一旦我再次点击按钮，旧的风格应该会恢复。看看代码：

function changeStyleOne(){
if(this.style.background != 'rgba(207,207,207,.8)'){
    this.style.background = 'rgba(207,207,207,.8)';
    this.style.boxShadow = '0 5px 20px rgba(0,0,0,.3) inset';
    this.style.borderLeft = '0';
    this.style.width = '99px';

    button2.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)';
    button2.style.width = '98px';
    button2.style.borderLeft = '1px solid white';
    button2.style.boxShadow = '';
    button3.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)';
    button3.style.width = '98px';
    button3.style.borderLeft = '1px solid white';
    button3.style.boxShadow = '';

displayContent1();

}else{
    this.style.background = '-webkit-linear-gradient(bottom, #B9B9B9 0%, white 90%)';
    this.style.boxShadow = '';
    this.style.borderLeft = '1px solid white';
    this.style.width = '98px';
}

}

---

这不起作用：当我再次单击按钮时，它无法恢复旧样式。你知道为什么吗

这是一个简单的例子

---

以下是一个简单的示例，您可以从中学习：

HTML:

jQuery：

$("button").click(function() {
   $(this).toggleClass('styled');
});

---

使用类并在类名之间切换是最好的解决方案。有时浏览器在使用rgb（x，x，x）时会遇到问题。，rgba也是如此。我今天也做了同样的事情——在Chrome中工作得很好，但Firefox说没有。使用类确实会更好。请记住，当你说

'rgba（20720720720720720720707.8）

时，EMCA脚本正在解析这个字符串，将其解释为

rbga

规范，然后解析每个值。前三个

207

值存储为整数值，但最后一个.8存储为浮点值。因此，当您稍后要求使用

this.style.background

时，它可能会返回为

'rgba（2072072072070.8）

或类似的名称（可能在右侧奔腾上，它会出现

0.79999999

）。因此，不要期望它返回您传递给它的内容。由于类是一个字符串标识符，所以没有这样对待它。在我看来，将Javascript内联到HTML上是一种糟糕的做法。这也行，虽然我不懂语法，但非常感谢！很好，谢谢你。我不知道jQuery，因为我对Web开发完全是新手。不过，再次感谢你，我会努力适应的！

<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>

.styled {
    background: lightblue;
}

$("button").click(function() {
   $(this).toggleClass('styled');
});