jquery - 将CSS背景颜色添加到Javascript函数中的按钮

Question

我想在 javascript 函数中为按钮添加背景色。这是我的代码。

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

我添加了 buttons.style.background = '#FF00AA'; 来为函数中的按钮添加背景颜色。但它不起作用。那我该怎么做呢。谁能帮帮我。

Answer 1

使用this.style.backgroundColor="red";

OR 在 JQuery 中 $(this).css("background-color","re​​d");

看这里: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>