Javascript更改div的颜色，然后更改div的颜色'；s焦点

我正在制作一个html论坛，并使用javascript更改论坛的颜色，我有三个分区，一个是蓝色、绿色和红色

单击每个div时，javascript将更改元素的颜色

我想用javascript中的.css（）函数更改submit按钮焦点的颜色，但焦点部分不起作用

以下是我的javascript代码：

$("#green").click(function() {
    $(".mailheader").css("background","#a3d300");
    $(".submit").css("background","#a3d300");
    $(".submit:focus").css("background","#98cf00");
});
$("#blue").click(function() {
    $(".mailheader").css("background","#00b4ff");
    $(".submit").css("background","#00b4ff");
    $(".submit:focus").css("background","#04a6e9");
});
$("#red").click(function() {
    $(".mailheader").css("background","#ff0000");
    $(".submit").css("background","#ff0000");
    $(".submit:focus").css("background","#ea0202");
});

---

所以我尝试了

$（“.submit:focus”）.css（“background”，“ea0202”）用于更改焦点的背景，但它不起作用。有人知道怎么解决这个问题吗？谢谢
jQuery无法更改伪元素的样式

修复（我对
：focus
的样式使用了
.html（）
函数，在正文或其他地方使用了
标记）：

jQuery无法更改伪元素的样式

修复（我对
：focus
的样式使用了
.html（）
函数，在正文或其他地方使用了
标记）：

您可以直接在元素上设置样式。为什么不在元素上设置一个css类并通过css处理所有的更改呢。那更干净，更容易使用

例如，单击“绿色”时，将类“绿色”添加到提交按钮。（请参阅）（请确保删除其他类别）

然后在css中，您可以设置#MySubmitButton.Green{..您的绿色样式..}并使用您喜欢的所有伪css类。比如#MySubmitButton.Green:hover{color:#FF00FF；}

希望这有帮助…
您正在直接在元素上设置样式。为什么不在元素上设置一个css类并通过css处理所有的更改呢。那更干净，更容易使用

例如，单击“绿色”时，将类“绿色”添加到提交按钮。（请参阅）（请确保删除其他类别）

然后在css中，您可以设置#MySubmitButton.Green{..您的绿色样式..}并使用您喜欢的所有伪css类。比如#MySubmitButton.Green:hover{color:#FF00FF；}

希望这有助于……
检查此项


HTML

<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />

jQuery

$("#green").click(function () {
    $(".mailheader").css("background", "#a3d300");
    $(".submit").css("background", "#a3d300");
    $(".submit").focus(function () {
        $(".submit").css("background", "#04a6e9");
    })
});
$("#blue").click(function () {
    $(".mailheader").css("background", "#00b4ff");
    $(".submit").css("background", "#00b4ff");
    $(".submit").focus(function () {
        $(".submit").css("background", "#ea0202");
    })
});
$("#red").click(function () {
    $(".mailheader").css("background", "#ff0000");
    $(".submit").css("background", "#ff0000");
    $(".submit").focus(function () {
        $(".submit").css("background", "#98cf00");
    })
});

检查此项


HTML

<div class="mailheader"></div>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
<input type="button" value="submit" class="submit" />

jQuery

$("#green").click(function () {
    $(".mailheader").css("background", "#a3d300");
    $(".submit").css("background", "#a3d300");
    $(".submit").focus(function () {
        $(".submit").css("background", "#04a6e9");
    })
});
$("#blue").click(function () {
    $(".mailheader").css("background", "#00b4ff");
    $(".submit").css("background", "#00b4ff");
    $(".submit").focus(function () {
        $(".submit").css("background", "#ea0202");
    })
});
$("#red").click(function () {
    $(".mailheader").css("background", "#ff0000");
    $(".submit").css("background", "#ff0000");
    $(".submit").focus(function () {
        $(".submit").css("background", "#98cf00");
    })
});

您的浏览器控制台中出现了什么错误？没有错误，只有
$（“.submit:focus”）.css（“background”，“ea0202”）行没有更改提交按钮焦点的背景颜色。将
背景
更改为
背景颜色
我建议您不要使用JavaScript设置CSS，而是在某个父元素上设置一个类，然后在样式表中定义CSS。将.click函数替换为：$（“body”）.addClass（“green”）；-我相信这也可以解决您的焦点问题。我已经有了一个样式表，我只是这样做，如果用户想要更改表单的颜色，他们可以通过JavaScript轻松完成。您在浏览器控制台中遇到了什么错误？没有错误，只有
$（“.submit:focus”）.css（“background”，“#ea0202”）行没有更改提交按钮焦点的背景颜色。将
背景
更改为
背景颜色
我建议您不要使用JavaScript设置CSS，而是在某个父元素上设置一个类，然后在样式表中定义CSS。将.click函数替换为：$（“body”）.addClass（“green”）；-我相信这也可以解决你的焦点问题。我已经有了一个样式表，我只是这样做，如果用户想要更改表单的颜色，他们可以通过javascriptThis轻松完成。但是使用css，当你关注div时，它会改变颜色，当你点击其他东西时，它会变成正常的颜色。你会如何做到这一点，比如当你“取消聚焦”按钮时，它会回到正常的颜色？谢谢我发现我可以用.blur（）来做这件事，谢谢你的回答。但是，我会让它成为公认的答案。我想用
.focus（）
来做一个按钮错误~。。。这不是一个好主意，因为使用js作为按钮对计算机来说很难（很小），css也不会改变（这是可行的，但使用css时，当你聚焦在div上时，它会改变颜色，当你点击其他东西时，它会变为正常颜色。你会如何做到这一点，比如当你“取消聚焦”按钮时，它会变回正常颜色？谢谢我发现我可以使用.blur（）要做到这一点，谢谢你的回答，我会让它成为公认的答案。我认为对按钮错误使用
.focus（）
不是一个好主意，因为对计算机来说，对按钮使用js很难（很小），css也不会改变(
$("#green").click(function () {
    $(".mailheader").css("background", "#a3d300");
    $(".submit").css("background", "#a3d300");
    $(".submit").focus(function () {
        $(".submit").css("background", "#04a6e9");
    })
});
$("#blue").click(function () {
    $(".mailheader").css("background", "#00b4ff");
    $(".submit").css("background", "#00b4ff");
    $(".submit").focus(function () {
        $(".submit").css("background", "#ea0202");
    })
});
$("#red").click(function () {
    $(".mailheader").css("background", "#ff0000");
    $(".submit").css("background", "#ff0000");
    $(".submit").focus(function () {
        $(".submit").css("background", "#98cf00");
    })
});