Javascript 单击按钮后如何更改颜色

我想在点击按钮后改变它的颜色。我已经尝试了css和javascript，但对我来说不起作用。 这是css代码

<style>
.style {
    width: 115px;
    height: 45px;
    background: #8CC639;
    padding: 15px;
    text-align: center;
    border-radius: 5px;
    color: #3071A9;
    font-weight: bold;
    cursor: pointer;
}

.style:hover {
background: blue;
}
 .style:active{
background: blue;

} */
.style:visited {
    color: red;
}

</style>

.风格{
宽度：115px；
高度：45px；
背景#8CC639；
填充：15px；
文本对齐：居中；
边界半径：5px；
颜色：#3071A9；
字体大小：粗体；
光标：指针；
}
.样式：悬停{
背景：蓝色；
}
.样式：活动{
背景：蓝色；
} */
.风格：参观{
颜色：红色；
}

以下是我的jsp页面中的内容：

    <script>

    $(document).ready(function(){
        $('#btnHousing').click(function() {
            //Now just reference this button and change CSS
            $(this).css('background-color','#f47121');
        });
        $( "#tabs" ).tabs({
        beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
        ui.panel.html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
        "If this wouldn't be a demo." );
        });
        }
        });

    })(jQuery);
    </script>

    <div class="page">

    <fieldset>
    <form>

    <div align="center">
    <input  type = "button"
           value = "Throw"
         onclick = "javascript:location.href='throw.html';"
    />

    <span class="right">
    <input  type = "button" id="style"
           value = "User"
         onclick = "javascript:location.href='userAction.html'; "
    />
   </div>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Create</a></li>
            <!--    <li><a href="user/viewLogin.html">Log In</a></li> -->
                <li><a href="#tabs-2">Update</a></li>

            </ul>

            <div id="tabs-1">
                <h1>Create</h1>

            </div>
            <div id="tabs-2">
                <h1>Update</h1>
            </div>


        </div>

      </form>
      </fieldset>
    </div>

$（文档）.ready（函数（）{
$（'#btnHousing'）。单击（函数（）{
//现在只需引用此按钮并更改CSS
$（this.css（'background-color'，'#f47121'）；
});
$（“#制表符”）。制表符({
加载前：函数（事件、ui）{
ui.jqXHR.error（函数（）{
ui.panel.html(
“无法加载此选项卡。我们将尝试尽快修复此问题。”+
“如果这不是演示的话。”）；
});
}
});
})（jQuery）；




创造
更新

---

我想要喜欢stackoverflow按钮。当用户点击按钮时，按钮的颜色会在点击后发生变化。我已经尝试过一些方法。css、JQuery或javascript中的任何代码？谢谢

您的单击处理似乎正常

看起来你只是没有一个id为“btnHousing”的按钮

基于您的代码的测试工作示例：

<input type="button" id="btnHousing" value="Housing"/>
<script>
    $('#btnHousing').click(function() {
        //Now just reference this button and change CSS
        $(this).css('background-color','#f47121');
    });
</script>

$（'#btnHousing'）。单击（函数（）{
//现在只需引用此按钮并更改CSS
$（this.css（'background-color'，'#f47121'）；
});

您使用了类css选择器而不是id选择器

将样式更改为

#style

而不是

.style

或者改变按钮说

class="style"

或

.red{背景色：#ff0000；}
document.getElementById（'id-of-the-button'）。onclick=function（）{
this.className='red'；
};

您可以尝试以下方法：

var button = document.querySelector("button");
button.addEventListener("click", function() {
  document.body.classList.toggle("purple");
  //the purple is a css class
})

---

@那是错误的。CSS需要

#

和3或6位数字。任何其他数字都将导致它无法解析。您是否确实有id为

btnHousing

的按钮？无法看到id为

btnHousing

的任何元素以便javascript运行，CSS也针对具有

.style

类的元素，而此HTML中没有任何具有

style

类的元素，更不用说，你似乎有一个孤儿评论在那里附近

*/

我的朋友（hex494D49）…它不起作用…我没有id为“btnHousing”的元素，我想使用到现在，它没有关系..（PM 77-1）@FationHadri，在StackOverflow上向某人发送评论时，确保在他们的名字前面加上一个

@

。这将导致他们收到有关您的评论的通知，以便他们知道您的评论在那里并可以阅读。例如，在您之前的评论中，您可以使用

@hex4949

。此外，这也没有什么害处，但你不需要为你评论的问题或答案的所有者做这件事，他们会在帖子上收到所有评论的通知。在这种情况下，因为您的评论是关于答案而不是对问题的评论，所以评论应该出现在答案上。这对我有帮助，但在单击按钮后它不会保留按钮的颜色。其他建议？谢谢……那么我会遵循您的jquery想法，但如下所示：

$（'#style'）。on（“click”，function（）{$（this）.css（'background-color'，'f47121'）；）

它不起作用，这是一样的，只是当我们在按钮上悬停时，而不是在单击之后。它看起来不错，但不起作用。您的按钮看起来像是带您到不同的页面，这个jquery代码只有在它停留在同一页面上时才起作用。否则，您可能需要考虑将按钮的状态存储在jsp中的会话变量中并在页面加载时将其加载回。是的，您是对的，此按钮用于不同的jsp页面。我将在相同的jsp页面中尝试。非常感谢：）@SnoApps

<style type="text/css">
  .red {background-color: #ff0000;}
</style>  

document.getElementById('id-of-the-button').onclick = function(){
  this.className = 'red';
};

var button = document.querySelector("button");
button.addEventListener("click", function() {
  document.body.classList.toggle("purple");
  //the purple is a css class
})