Ajouter une couleur de fond CSS à un bouton dans une fonction Javascript

Question

Je veux ajouter une couleur de fond à un bouton dans une fonction javascript. Voici mon 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>

J'ai ajouté buttons.style.background = '#FF00AA'; pour ajouter une couleur d'arrière-plan au bouton qui se trouve dans la fonction. Mais cela ne fonctionne pas. Comment puis-je faire ? Quelqu'un peut-il m'aider ?

Answer 1

Utilisation this.style.backgroundColor="red";

OU dans JQuery $(this).css("background-color","red");

Voir ici : 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>

Answer 2

Essayez ceci :

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

Answer 3

Vous pouvez utiliser $(this).css('background-color', 'red'); dans 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>

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

Answer 4

Voici une 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>

Vous devez définir une classe dans CSS et utiliser className pour ajouter la classe au bouton.

J'espère que cela vous aidera.