使用JS更改Div的顏色

Question

因此，我設置了一個簡單的onclick函數，該函數應該更改div的背景。 這是我的JS代碼；

var colour = document.getElementById("backgroundColour");

function changeToColour1() {
    colour.style.backgroundColor = "#47535F";
}

function changeToColour2() {
    colour.style.backgroundColor = "#82A3B2";
}

這是我的HTML代碼；

<button id="colour1" class="colours" onclick="changeToColour1()"></button>

<button id="colour2" class="colours" onclick="changeToColour2()"></button>

<div id="backgroundColour"></div>

單擊按鈕后，如何使div更改其顏色？

Answer 1

一種更干凈的方法是使用javascript將類添加到元素中，然后讓CSS控制顏色。


$('#colour1').on('click',function(){
  $('#backgroundColour').removeClass('colour1 colour2').addClass('colour1');
});

$('#colour2').on('click',function(){
  $('#backgroundColour').removeClass('colour1 colour2').addClass('colour2');
});

並放在您的CSS中


#backgroundColour.colour1 {
  background-color: #47535F;
}

#backgroundColour.colour2 {
  background-color: #82A3B2;
}

Answer 2

給Div適當的寬度和高度或一些內容，否則將看不到div。
避免使用內聯事件處理程序，並使用DOM3事件處理程序。
您也可以使用data- *屬性來存儲顏色，而不是為每個按鈕使用單獨的功能。

HTML

<button id="colour1" class="colours" data-color="#47535F" >Click me</button>

<button id="colour2" class="colours" data-color="#82A3B2">Click me</button>

<div id="backgroundColour">fff</div>

JS

var colourDiv = document.getElementById("backgroundColour");

var colours = document.getElementsByClassName('colours');

for(var i=0; i< colours.length; i++) {
    colours[i].addEventListener('click', function() {
         var color = this.getAttribute('data-color');
         colourDiv.style.backgroundColor = color;
    });
}

檢查小提琴

Answer 3

首先，我建議您使用JQuery來完成您要完成的任務，即時消息建議您這樣做，因為JQuery是一個簡單的javascript直截了當的庫，使我們作為編碼員的生活變得更加簡單，說這是代碼。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
    <title>...</title>

    <style type="text/css">
        html, body{
            width:auto;
            height:auto;
        }
        #changing{ /*this is the css for our javascript*/
            margin:0px;
            padding:0px;
            width:100%;
            height:100%;
            position:absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
        }
        #wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
            margin:0px;
            padding:0px;
            width:100%;
            height:40px;;
            background-color:#000000;
            border-bottom:5px solid #D8D8D8;
            border-radius:0px;
            position:fixed;
            top:0px;
            left:0px;
            z-index:10;
        }
        #button1, #button2{
            margin:0px;
            padding:0px;
            width:auto;
            height:auto;
            position:fixed;
        }
        #button1{
            top:0px;
            left:0px;
        }
        #button2{
            top:0px;
            right:0px;
        }
    </style>

    <script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <div id="body-container">
        <div id="wrap">
            <input type="button" id="button1" value="click me" />
            <input type="button" id="button2" value="click me 2" />
        </div>
        <div id="changing">
        </div>
    </div>
    <script>
        $("#button1").click(function(){
            $("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
        })
        $("#button2").click(function(){
            $("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
        })
    </script>
</body>
</html>

在此代碼中，我們將內聯css和javascript與JQuery庫一起使用，我們首先通過添加DOCTYPE和具有屬性content-type和content-language的meta標簽來開始文檔如何始終啟動html文檔的過程，同時還添加了標題。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
    <title>...</title>
</head>
<body>

</body>
</html>

接下來，我們添加腳本以導入JQuery庫，我通常會使用google托管版本，因為它通常可以正常運行，並且我不必不斷地對其進行更新，那么google會為您做到這一點，您唯一需要做的就是添加src中的新URL替換舊版本的JQuery。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
    <title>...</title>

    <script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

</body>
</html>

接下來，我們添加html，在我們的html中，我們添加了兩個按鈕，並將它們放置在稱為wrap的div中，並添加了更改的div，並將更改的div和wrap div都放置到稱為body-container的div中。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
    <title>...</title>

    <script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <div id="body-container">
        <div id="wrap">
            <input type="button" id="button1" value="click me" />
            <input type="button" id="button2" value="click me 2" />
        </div>
        <div id="changing">
        </div>
    </div>
</body>
</html>

現在是時候使用腳本和CSS添加錦上添花了，在這里我們添加CSS來確定我們制作的頁面樣式，以便瀏覽菜單是按鈕位於頁面上並始終滾動到現在在腳本上，我們制作了腳本，因此如果按下按鈕，它將更改div body-container的背景。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta http-equiv="content-language" content="en-US" />
    <title>...</title>

    <style type="text/css">
        html, body{
            width:auto;
            height:auto;
        }
        #changing{ /*this is the css for our javascript*/
            margin:0px;
            padding:0px;
            width:100%;
            height:100%;
            position:absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
        }
        #wrap{ /*this is to keep the browse menu that has your buttons from disappearing below the changing div*/
            margin:0px;
            padding:0px;
            width:100%;
            height:40px;;
            background-color:#000000;
            border-bottom:5px solid #D8D8D8;
            border-radius:0px;
            position:fixed;
            top:0px;
            left:0px;
            z-index:10;
        }
        #button1, #button2{
            margin:0px;
            padding:0px;
            width:auto;
            height:auto;
            position:fixed;
        }
        #button1{
            top:0px;
            left:0px;
        }
        #button2{
            top:0px;
            right:0px;
        }
    </style>

    <script rel="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
    <div id="body-container">
        <div id="wrap">
            <input type="button" id="button1" value="click me" />
            <input type="button" id="button2" value="click me 2" />
        </div>
        <div id="changing">
        </div>
    </div>
    <script>
        $("#button1").click(function(){
            $("#changing").css("background-color", "#47535F");//changes the color of the background to #47535F
        })
        $("#button2").click(function(){
            $("#changing").css("background-color", "#82A3B2");//changes the color of the background to #82A3B2
        })
    </script>
</body>
</html>

我希望這會有所幫助，有關JQuery的任何信息，我建議您訪問其在線文檔，那里有很多有用的信息，這是鏈接

http://api.jquery.com/

您還可以查看w3chools，它們在JQuery以及許多其他編程語言上都有很多不錯的東西，這是鏈接

http://www.w3schools.com/

祝您在項目中運氣佳或學習javascript語言（=

使用JS更改Div的顏色

問題描述

3 個解決方案

解決方案1
1 2014-04-02 23:40:23

解決方案2
1 2014-04-02 23:43:36

解決方案3
0 2014-04-03 01:38:04

使用JS更改Div的顏色

問題描述

3 個解決方案

解決方案1 1 2014-04-02 23:40:23

解決方案2 1 2014-04-02 23:43:36

解決方案3 0 2014-04-03 01:38:04

解決方案1
1 2014-04-02 23:40:23

解決方案2
1 2014-04-02 23:43:36

解決方案3
0 2014-04-03 01:38:04