如何使用 Css 动态更改背景颜色答案

【问题标题】：How to change background colour dynamically using Css如何使用 Css 动态更改背景颜色
【发布时间】：2019-03-13 14:17:52
【问题描述】：

我设置了一个方法，当单击按钮时，它会更改其背景颜色并重置其他三个按钮的颜色。 button1 的方法是这样的

<script>
    function changeBttn1() {
        document.getElementById("bttn1").style.backgroundColor = '#add8e6';
        document.getElementById("bttn2").style.backgroundColor = '#D3D3D3';
        document.getElementById("bttn3").style.backgroundColor = '#D3D3D3';
        document.getElementById("bttn4").style.backgroundColor = '#D3D3D3';
    }...

此外，我希望能够使适用于每个按钮的 Div 出现，并通过按下相同的按钮隐藏其他按钮。 Div 使用 Class=Collapse 对应于 Bootstrap.css 中的 Display:None 但我想将其更改为从与按钮相同的方法运行。如何使用 Css 完成这两个事件？

【问题讨论】：

如果可能，请分享 html 和演示
只需在同一个函数中执行两行代码。此外，如果您只显示一个 div，则无需更改颜色，将它们全部保存在 #add8e6 并隐藏您不需要的部分并只显示您需要的部分

标签： javascript css model-view-controller onclick visual-studio-2017

【解决方案1】：

请这样做非常简单和容易

$('.my-btn').on('click',function(){
  var colorval=$(this).attr('color');
  $('.my-btn').css('background-color', 'grey');
  $(this).css('background-color', colorval);
});

button{
background-color:grey;
padding:10px;
border:1px solid #000000;
color:#ffffff;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button-wrapper">
  <button class="my-btn" color="red">Red</button>
  <button class="my-btn" color="green">Green</button>
  <button class="my-btn" color="purple">Purple</button>
</div>

【讨论】：