时间戳

首页 > 解决方案 > 如何使用 jQuery 更改按钮的背景颜色？

jquery - 如何使用 jQuery 更改按钮的背景颜色？

问题描述

当您按下按钮切换字母时，我想更改元素的背景。我试过attr和replace。

当我看到 时，我希望background-color名为Step1白色和黑色的按钮的。我怎样才能做到这一点？Step2nice to meet you

感谢您的阅读。

$(document).ready(function() {
  $('#content2').hide();
  $('#content1').show();

  $('button').click(function(e) {
    $('#content1').hide();
    $('#content2').show();

    var colorA = $('#a').css('background-color'); //black
    var colorB = $('#b').css('background-color'); //white
    $('#a').attr('color', 'white');
    $('#b').attr('color', 'black');
  });
});
.star {
  border: 1px solid gray;
  margin: auto;
}

#a {
  border: 1px solid gray;
  background-color: black;
  color: white;
}

#b {
  border: 1px solid gray;
  background-color: white;
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<div class="star">
  <il id="a">Step1</il>
  <il id="b">Step2</il>
  <div id="content1">
    <h1>hello</h1>
  </div>
  <div id="content2">
    <h1>nice to meet you</h1>
  </div>
  <button type="button">button</button>

标签： jquery

解决方案

您好，欢迎来到 StackOverflow！

jQuery 的 API 允许通过.css()方法修改 CSS。根据文档，您有两种可能性：

  1. .css('css_param', 'wanted_value')
  2. .css({'param1':'value1', 'param2':'value2', ...})

查看您的#b元素，它看起来像这样：

$('#b').css('background-color','black');

jQuery API 文档易于阅读和理解。如果您知道方法，请不要犹豫，在那里搜索。它帮助了我很多次。

推荐阅读