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事件处理程序。
您还可以使用数据 - * 属性来存储颜色而不是每个按钮都有独立的功能。

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

<强> Check Fiddle

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和我们的meta标签以及属性content-type和content-language我们也应该总是启动一个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库，我通常使用谷歌托管版本，因为它通常启动并运行，我不必不断更新它，谷歌为你做的，你需要的唯一的东西do是在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体容器的背景。

<!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 个答案: