首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >在Javascript函数中向按钮添加CSS背景色

在Javascript函数中向按钮添加CSS背景色
EN

Stack Overflow用户
提问于 2018-06-19 06:44:36
回答 4查看 409关注 0票数 2

我想在javascript函数中添加一个按钮的背景色。这是我的密码。

代码语言:javascript
代码运行次数:0
运行
复制
$('#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!')
                }
            },
        ]
    })
});
代码语言:javascript
代码运行次数:0
运行
复制
  <script type="text/javascript" src="js/my-app.js"></script>

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

我添加了buttons.style.background = '#FF00AA';以向函数中的按钮添加背景色。但不起作用。那我该怎么做呢。有人能帮我吗。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-06-19 06:55:05

给你一个解决办法

代码语言:javascript
代码运行次数:0
运行
复制
$('#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"
      }
    ]
  })
});
代码语言:javascript
代码运行次数:0
运行
复制
.buttonRed {
  background: red;
}
代码语言:javascript
代码运行次数:0
运行
复制
<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>

您需要在CSS中定义类&使用className属性将类添加到按钮中。

希望这能帮到你。

票数 1
EN

Stack Overflow用户

发布于 2018-06-19 06:50:47

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

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

见此处:css.asp

代码语言:javascript
代码运行次数:0
运行
复制
$('#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!')
                }
            },
        ]
    })
});
代码语言:javascript
代码运行次数:0
运行
复制
<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>

票数 2
EN

Stack Overflow用户

发布于 2018-06-19 06:50:12

试试这个:

代码语言:javascript
代码运行次数:0
运行
复制
$(this).css('background-color','#f47121');
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50922132

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档