Javascript改变div的颜色，然后改变div焦点的颜色答案

【问题标题】：Javascript change colour of divs, and then colour of the div's focusJavascript改变div的颜色，然后改变div焦点的颜色
【发布时间】：2014-04-22 10:04:12
【问题描述】：

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

当每个div被点击时，javascript会改变元素的颜色。

我想用javascript中的.css()函数改变提交按钮焦点的颜色，但是焦点部分不起作用。

这是我的 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"); 改变焦点的背景，但它不起作用。有人知道怎么修这个东西吗？谢谢

【问题讨论】：

您在浏览器控制台中遇到什么错误..？
没有错误，只是$(".submit:focus").css("background","#ea0202"); 行没有改变提交按钮焦点的背景颜色。
将background 更改为background-color
我可以建议您不要使用 JavaScript 设置 CSS，而是在某些父元素上设置一个类，然后在样式表中定义您的 CSS。将您的 .click 函数替换为： $("body").addClass("green"); - 我相信这也可以解决您的注意力问题。
我已经有一个样式表，我只是在制作它，所以如果用户想要更改表单的颜色，他们可以通过 javascript 轻松完成

标签： javascript jquery html css

【解决方案1】：

检查一下

DEMO

HTML

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

CSS

#green, #red, #blue {
    height:50px;
    width:100px;
}
#green {
    background-color:green;
}
#red {
    background-color:red;
}
#blue {
    background-color:blue;
}

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");
    })
});

【讨论】：

这行得通，但是当你专注于 div 时，它会改变颜色，当你点击其他东西时，它会变成正常颜色。您将如何做到这一点，例如当您“取消对焦”按钮时它会恢复正常颜色？谢谢
我发现我可以使用 .blur() 来做到这一点，谢谢你的回答，我会把它作为接受的答案
我认为将.focus() 用于按钮 err~... 不是一个好主意，因为使用 js 作为按钮对于计算机来说很难（很小），而且 css 不会变回来。 :(

【解决方案2】：

您直接在元素上设置样式。为什么不在元素上设置一个 css 类并通过 css 处理所有更改。这更清洁，更易于使用。

例如。单击“#green”时，将类“Green”添加到提交按钮。（见http://api.jquery.com/addClass/）（一定要删除其他类）

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

之类的东西

希望这会有所帮助...

【讨论】：

【解决方案3】：

jQuery 不能改变伪元素的样式

修复（我使用:focus 的样式的.html() 函数，在正文或其他地方使用<style> 标记）：

<script>
    ...
    $(".submit").css("background","#ff0000");
    $("body style.changeColor").html("
        .submit:focus {background: #ea0202};
    ");
    ...
</script>
<body>
    <style class="changeColor">
    </style>
</body>

而我就是你，我宁愿将所有其他 .css() 函数更改为 .html() 字符串中的文本。

$("body style.changeColor").html("
    ...
    .submit {background: #ff0000};
    .submit:focus {background: #ea0202};
");

【讨论】：