Javascript更改div的顏色，然后更改div焦點的顏色

Question

我正在建立一個html論壇，並使用javascript更改論壇的顏色，我有三個div，一個是藍色，綠色和紅色。

單擊每個div時， javascript將更改elements的顏色 。

我想使用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不能更改偽元素的樣式

修復（我在主體中或其他位置使用<style>標記將.html()函數用於:focus的樣式）：

<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處理所有更改。 那更干凈，更容易使用。

例如。 單擊“ #green”時，將一個類“ Green”添加到提交按鈕。 （請參閱http://api.jquery.com/addClass/ ）（確保刪除其他類）

然后，在CSS中，您可以設置＃MySubmitButton.Green {..您的綠色樣式..}並使用您喜歡的所有偽CSS類。 ＃MySubmitButton.Green：hover {color：＃FF00FF;}之類的東西

希望這可以幫助...

Javascript更改div的顏色，然后更改div焦點的顏色

問題描述

3 個解決方案

解決方案1
2 已采納 2014-04-22 10:17:18

解決方案2
1 2014-04-22 10:11:38

解決方案3
1 2014-04-22 10:16:20

Javascript更改div的顏色，然后更改div焦點的顏色

問題描述

3 個解決方案

解決方案1 2 已采納 2014-04-22 10:17:18

解決方案2 1 2014-04-22 10:11:38

解決方案3 1 2014-04-22 10:16:20

解決方案1
2 已采納 2014-04-22 10:17:18

解決方案2
1 2014-04-22 10:11:38

解決方案3
1 2014-04-22 10:16:20