CODEWITHSUNDEEP
jquery
infiniteQuestions
infiniteQuestions

Reputation: 21

how can I change the background-color of the button using jQuery?

I want to change the background of the element when you press the button to switch the letter. I've tried attr and replace.

I want the background-color of the button named Step1 to be white and Step2 to be black when I see nice to meet you. How can I do this?

Thank you for reading.

$(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>

Upvotes: 0

Views: 82

Answers (3)

Prateik Darji
Prateik Darji

Reputation: 2317

You can simply use css method of jQuery. I have updated your code below.

$(document).ready(function(){

    $('#content2').hide();
    $('#content1').show();

    $('button').click(function(e){

        $('#content1').hide();
        $('#content2').show();
        
       

        $('#a').css({"background-color":"white", "color":"black"});
        $('#b').css({"background-color":"black", "color":"white"});

    }); 

});
.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>
<html>

<head>

</head>
<body>
    <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>
</body>

</html>

Upvotes: 0

Pedram
Pedram

Reputation: 16575

The right way is:

$('#a').css('background-color', 'black'); // With dash
//---------------------^

Or:

$('#a').css('backgroundColor', 'black'); // Without dash

//--------------------^

And or:

$('#a').css({ // object
   'backgroundColor': 'black',
   'color': 'white'
});

Or an alternate way is addClass()

 $('#a').addClass('black');
// css
.black {
     background: black;
}


$(document).ready(function() {

  $('#content2').hide();
  $('#content1').show();

  $('button').click(function(e) {

    $('#content1').hide();
    $('#content2').show();

    $('#a').css({
      'backgroundColor': 'black',
      'color': 'white'
    });
    $('#b').css({
      'background-color': 'white',
      'color': 'black'
    });

  });

});
.star {
  border: 1px solid gray;
  margin: auto;
}

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

#b {
  border: 1px solid gray;
  background-color: black;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.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>
</div>

Upvotes: 1

C0nverter
C0nverter

Reputation: 139

Hello and welcome to StackOverflow!

jQuery's API allow to modify CSS via .css() method. You have two possibilities, according to documentation:

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

Looking at your #b element, it would look like this:

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

The jQuery API docs are simple to read and understand. If you know the method, don't hesitate to search there. It helped me many times.

Upvotes: 1

Related Questions