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

有一个相关的问题，但它比这更先进。我只是尝试使用jQuery来更改保存页脚的按钮的背景颜色和文本颜色。单击功能可以很好地处理背景色，但文本不会改变颜色。我错过了什么？以下是我的jQuery代码：

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

---

这里有一个指向JSFIDLE的链接：

设置字体颜色的CSS属性就是

color

。请注意，如果您提供了一个对象，则可以使用对

css（）

的单个调用。试试这个：

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

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

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

.active{
颜色：#ff99ff；
背景色：#000066；
}

$（“按钮”）。在（“单击”，“页脚”，函数（）上{
$（this.addClass（'active'）；
});

---

最后，在

按钮

元素中放置

页脚

是无效的。你应该反转这些元素。

我想你应该交换页脚和按钮 从

到

---

我猜按钮在页脚内，而页脚不在按钮内，因此更改字体颜色的属性不是

font-color

，而是

color

你可以试试这样的

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

---

为这两种状态（单击之前和之后）设置CSS类，然后只需在action/event方法中调用JQuery和

此外，您还可以通过对按钮元素使用IDs并调用JQuery函数来简化代码

CSS:

button .button-default {
    ...
}

button .button-clicked {
    color: #ff99ff;
    background-color: #000066;
}

$("#button").click(function() {
    $(this).removeClass('button-default');
    $(this).addClass('button-clicked');
});

JS:

button .button-default {
    ...
}

button .button-clicked {
    color: #ff99ff;
    background-color: #000066;
}

$("#button").click(function() {
    $(this).removeClass('button-default');
    $(this).addClass('button-clicked');
});

---

感谢您在另一个答案中提到这一点。

使用jQuery向按钮添加CSS类。并使用CSS更改按钮的字体和背景色。

$（“按钮”）。在（“单击”，“页脚”，函数（）上{

huh？

inside

inside

内部

内部

内部

确实看起来选择器是反向的。没有字体颜色这样的css值。它只是颜色。实现这一点的方法是在css中创建一个类，并使用JQueryEvent应用/切换该类。即使这样做有效，使用块元素也被认为是不好的做法在

按钮内部

。如果您没有将其用作按钮，我建议您将其删除，只保留

页脚

。这里有什么奇怪的地方？

$（“按钮”）。在（“单击”，“页脚”，函数（）{

上，您需要使用引号$（this）获取css属性名。css（{“颜色”：“#ff99ff'，“背景色”：“#000066'））；@kpucha这不是真的，对象中的键不需要引号。不，你真的不需要引号。你似乎把对象语法和JSON搞混了。@kpucha不，对象键不需要引号。如果键包含特殊字符，那么键应该用引号括起来。如果你不相信，试试那段代码。你可以使用是的，但与单击委派无关，因为在这种情况下，我认为他使用了错误的方法。1.使用

$（此）

在处理程序内部访问单击的元素。2.可以在同一选择器上链接方法。3.正确编写CSS时无需删除默认类。使用

$（'button'）。单击（function（）{$（this）.addClass（'button-clicked'）；}）

1.是的，我更新了我的答案。2.是的，但我强调代码的清晰性，我认为它的性能不会更好。3.如果您在上一节课中覆盖了所有需要覆盖的内容，那么也是这样。我宁愿覆盖整个类，尤其是如果您使用CSS库（如Bootstrap）。谢谢您的评论。