使用jQuery更改按钮的字体和背景颜色

Question

有一个相关的问题,但它比这更先进.我只是尝试使用jQuery来更改按住我的页脚的按钮的背景颜色和文本颜色.点击功能可以正常使用背景颜色,但文字不会改变颜色.我错过了什么？这是我的jQuery代码:

jQuery(document).ready(function() {
    $("button").on("click", "footer", function() {
        $(this).css("font-color", "#ff99ff");
        $(this).css("background-color", "#000066");
    });
});

这是jsfiddle的链接:https://jsfiddle.net/qjawmyu1/

Answer 1

用于设置字体颜色的CSS属性就是color.请注意,css()如果提供对象,则可以使用单个调用.试试这个:

$("button").on("click", "footer", function() {
    $(this).css({
        color: '#ff99ff',
        backgroundColor: '#000066'
    });
});

此外,将样式保存在单独的样式表中并使用jQuery仅从元素添加/删除类被认为是更好的做法.试试这个:

.active {
    color: #ff99ff;
    background-color: #000066;
}

$("button").on("click", "footer", function() {
    $(this).addClass('active');
});

最后,您放置footer内部button元素无效.你应该扭转那些元素.

Answer 2

改变字体颜色的属性font-color不仅仅是color

所以你可以尝试这样的事情

jQuery(document).ready(function() {
    $("button").on("click", "footer", function() {
       $(this).css("color", "#ff99ff");
       $(this).css("background-color", "#000066");
   });
});