CODEWITHSUNDEEP
jqueryhtmlcss
Chathuri Fernando
Chathuri Fernando

Reputation: 972

Adding CSS background color to a button in Javascript function

I want to add background color to a button in a javascript function. This is my code.

$('#theme').on('click', function () {
    myApp.modal({
        verticalButtons: true,
        buttons: [
            {
                text: 'Themes Category',
                onClick: function() {
                        document.getElementById('content_01').style.display = "none";
                        document.getElementById('content_02').style.display = "block";
                }
            },
            {
                text: 'All themes',
                onClick: function() {
                    myApp.alert('You clicked second button!')
                }
            },
        ]
    })
});
  <script type="text/javascript" src="js/my-app.js"></script>

<button class="col button button-fill" id="theme">Themes</button>

I added buttons.style.background = '#FF00AA'; to add background color to the button which is in the function. But it does not work. So how can I do this. Can anyone help me.

Upvotes: 2

Views: 488

Answers (4)

Shiladitya
Shiladitya

Reputation: 12161

Here you go with a solution

$('#theme').on('click', function () {
    myApp.modal({
      verticalButtons: true,
      buttons: [{
        text: 'Themes Category',
        onClick: function() {
          document.getElementById('content_01').style.display = "none";
          document.getElementById('content_02').style.display = "block";
        },
        className: "buttonRed"
      },
      {
        text: 'All themes',
        onClick: function() {
          myApp.alert('You clicked second button!')
        },
        className: "buttonRed"
      }
    ]
  })
});
.buttonRed {
  background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="col button button-fill" id="theme">Themes</button>

You need to define a class in CSS & use className property to add the class in button.

Hope this will help you.

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16261

Use this.style.backgroundColor="red";

OR in JQuery $(this).css("background-color","red");

See here:https://www.w3schools.com/jquery/jquery_css.asp

$('#theme').on('click', function () {
    this.style.backgroundColor="red";
    myApp.modal({
        verticalButtons: true,
        buttons: [
            {
                text: 'Themes Category',
                onClick: function() {
                        document.getElementById('content_01').style.display = "none";
                        document.getElementById('content_02').style.display = "block";
                }
            },
            {
                text: 'All themes',
                onClick: function() {
                    myApp.alert('You clicked second button!')
                }
            },
        ]
    })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="col button button-fill" id="theme">Themes</button>

Upvotes: 2

Ankit Agarwal
Ankit Agarwal

Reputation: 30729

You can use $(this).css('background-color', 'red'); in JQuery

$('#theme').on('click', function () {
    $(this).css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="col button button-fill" id="theme">Themes</button>

Or even $(this).css('background', 'red')

$('#theme').on('click', function () {
    $(this).css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="col button button-fill" id="theme">Themes</button>

Upvotes: 1

M&#225;rton R&#243;bert
M&#225;rton R&#243;bert

Reputation: 166

Try this:

$(this).css('background-color','#f47121');

Upvotes: 1

Related Questions