使用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