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";

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

见这里：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

试试这个：

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

Answer 3

您可以在JQuery中使用$(this).css('background-color', 'red');

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

甚至是$(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

您可以使用解决方案

＆＃13;

$('#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"
      }
    ]
  })
});

＆＃13;

.buttonRed {
  background: red;
}

＆＃13;

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

＆＃13;

你需要在CSS＆amp;中定义一个类。使用className属性在按钮中添加类。

希望这会对你有所帮助。

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

4 个答案: