单击按钮更改背景颜色
[英]changing the background color on clicking on the button
问题描述
我正在学习JavaScript！
我需要做的是，在更改图像的同时，通过单击按钮来更改背景颜色。
从开灯到关灯的图片更改工作正常，唯一的问题是html页面背景的颜色没有更改。
function colorize() { var element = document.getElementById("azul"); element.style.backgroundColor = 'blue'; element.style.color = "yellow"; }
html{ background: grey; } #azul:focus { background: blue; }
<div id="branca"> <h1>LOI Lampen aanzetten en uitzetten</h1> <button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG'">Turn on the light</button> <img id="myImage" src="img/393533_01.PNG" class="mudar"> <div id="yellow"> <button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button> </div> </div>
4 个解决方案
解决方案1
0 2018-05-30 20:02:31
您想更改html的背景，所以您要做的是...
function colorize() {
var element = document.getElementsByTagName("html")[0];
element.style.backgroundColor = 'blue';
}
您正在使用按钮元素并更改其颜色。 您必须选择html标记，以更改通过CSS分配给它的background-clor属性。
解决方案2
0 2018-05-30 20:10:39
这也是您的解决方案，也调用了colorize函数
<html>
<script>
function colorize() {
var element = document.getElementsByTagName("html")[0];
element.style.backgroundColor = 'blue';
element.style.color = "yellow";
}
</script>
<style>
html{
background:
grey;
}
#azul:focus {
background: blue;
}
</style>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG';colorize()">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar">
<div id="yellow">
<button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
</div>
</div>
</html>
解决方案3
0 2018-05-30 20:11:57
您需要更改document的背景颜色，而不是element ，这是您的按钮。
由于您不熟悉JavaScript，因此让我们摆脱一些已经习惯的坏习惯。
不要通过HTML事件属性 （即onclick ， onmouseover等） 设置事件处理程序 。 这是我们已经拥有25年以上历史的技术，在我们拥有现代标准和最佳实践之前就已经使用，并且由于它易于使用，人们一直在使用它。 但是，出于多种原因，您不应该使用此技术 ，而是将JavaScript与HTML分开。 相反，请将您的JavaScript分开，并使用.addEventListener()将元素连接到它们各自的回调函数。
尽可能使用预制的CSS类，因为它们比内联CSS样式（通过.style属性）更易于管理和重用。 然后，您可以根据需要轻松使用element.classList API添加或删除类。
请参阅下面的内联评论：
// Get references to the elements you'll need to work with let targetImage = document.getElementById('myImage'); let btnOn = document.getElementById("on"); let btnOff = document.getElementById("off"); // Then, set up your event handlers in JavaScript, not HTML btnOn.addEventListener("click", changeImage); btnOff.addEventListener("click", changeImage); function changeImage(){ // Set the target's source to the data-source attribute for the clicked button targetImage.src = this.dataset.source; targetImage.alt = this.dataset.alt // Now update the alt attribute // Change the background color of the page by adding or removing a // pre-made class to/from the body based on the button that was clicked // Since this is a simple if/then scenario, we can use the JavaScript "ternary" operator // which works like this: some condition ? what to do if condition is true : what to do if false this.id === "on" ? document.body.classList.add("blue") : document.body.classList.remove("blue"); }
body { background-color: grey; } /* Style the body, not the HTML */ #on:focus { background: blue; color:yellow; } .blue { background-color:aliceblue; } /* This will be added when on is clicked */ /* Just for this example only */ img { width:100px; }
<button id="on" data-source='https://cdn.wccftech.com/wp-content/uploads/2015/04/bulb_PNG1250.png' data-alt="On Image">Turn on the light</button> <button id="off" data-source='https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg' data-alt="Off Image">Turn off the light</button> <div> <!-- <img> elements must have an alt attribute to be valid --> <img id="myImage" src="https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg" class="mudar" alt="default image"> </div>
解决方案4
0 2018-05-30 20:35:48
这是您的代码：
<style>
body {
background: grey;
}
</style>
<script>
function colorize(light) {
if (light) {
document.getElementById('myImage').src = '/img/393533_02.PNG';
document.body.style.background = 'grey';
}
else {
document.getElementById('myImage').src = '/img/393533_01.PNG'
document.body.style.background = 'blue';
}
}
</script>
<body>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="colorize(true)">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar"/>
<div id="yellow">
<button onclick="colorize(false)">Turn off the light</button>
</div>
</div>
</body>
现在，在colorize函数中，您可以为两个不同的条件编写任意数量的参数。
通过单击按钮更改背景颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.