Question

我正在制作一个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");来修改焦点的背景，但它没有用。有人知道怎么修这个东西吗？感谢

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

Answer 2

jQuery无法改变伪元素的风格

修复（我在.html()的样式中使用:focus函数，在正文或其他地方使用<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};
");

Answer 3

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

例如。当＆＃39; #green＆＃39;点击添加课程＆＃39;绿色＆＃39;到提交按钮。（见http://api.jquery.com/addClass/）（一定要删除其他类）

然后在css中你可以设置＃MySubmitButton.Green {..你的绿色样式..}并使用你喜欢的所有伪css类。＃MySubmitButton.Green之类的东西：悬停{color：＃FF00FF;}

希望这会有所帮助......

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

3 个答案: