更改背景颜色

Question

I try to have a button like switch off and when the user clicks on it the button will change to a button for switch on and with this event the color of the whole page will change from the classic white to red. 我尝试设置一个按钮，例如“关闭”，当用户单击该按钮时，该按钮将变为要打开的按钮，因此，整个页面的颜色将从经典的白色变为红色。

How can I do it? 我该怎么做？ Also it is possible to use one picture for on and off like this one and when it is off have the first left part and when the user click on change and have the right part (blue) with only one image? 此外，也可以使用一个画面和关闭这样一个当它是关闭的有第一左侧部分，并在用户点击的变化和有正确的部分（蓝色）只用一个形象？

Here what I have until know with the buttons click 在点击按钮之前，我所拥有的直到知道

<!DOCTYPE html>
<html>
<body>

<img id="myImage" onclick="changeImage()" src="off.gif">

<p>Click the button to change the color.</p>

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("on")) {
        image.src = "off.gif";
    } else {
        image.src = "on.gif";
    }
}
</script>

</body>

Answer 1

You can place another line in each branch of the if and else , to update the HTMLElement.style of the <html> element (thereby changing the background-color of the whole page): 您可以在if和else每个分支中放置另一行，以更新<html>元素的HTMLElement.style （从而更改整个页面的background-color ）：

 <img id="myImage" onclick="changeImage()" src="off.gif"> <p>Click the button to change the color.</p> <script> function changeImage() { var image = document.getElementById('myImage'), // finding the root <html> element: page = document.querySelector('html'); if (image.src.match("on")) { image.src = "off.gif"; // setting the background-color of the <html> element // to white (#fff): page.style.backgroundColor = '#fff'; } else { image.src = "on.gif"; // setting the background-color of the <html> element // to red (#f00): page.style.backgroundColor = '#f00'; } } </script>

I would, however, suggest binding your functionality - the event-handling function - in JavaScript, rather than using the in-line HTML event-handling attributes ( onchange , onclick , etc), to allow for easier future-maintenance: 但是，我建议您在JavaScript中绑定您的功能-事件处理功能-而不是使用内联HTML事件处理属性（ onchange ， onclick等），以方便将来的维护：

 function changeImage() { // caching the clicked image (the appropriate 'this' // is passed in by addEventListener() below): var image = this, // finding the root <html> element: page = document.querySelector('html'); if (image.src.match("on")) { image.src = "off.gif"; // setting the background-color of the <html> element // to white (#fff): page.style.backgroundColor = '#fff'; } else { image.src = "on.gif"; // setting the background-color of the <html> element // to red (#f00): page.style.backgroundColor = '#f00'; } } // finding the relevant element: var button = document.getElementById('myImage'); // binding the event-handling function ( changeImage() ) to // the click-event: button.addEventListener('click', changeImage)

 <img id="myImage" src="off.gif"> <p>Click the button to change the color.</p>

References: 参考文献：

document.getElementById() . document.getElementById() 。
document.getElementsByTagName() . document.getElementsByTagName() 。
document.querySelector() . document.querySelector() 。
EventTarget.addEventListener() . EventTarget.addEventListener() 。
HTMLElement.style . HTMLElement.style 。

Answer 2

There are a number of ways you can handle this. 您可以通过多种方式来处理此问题。 This example will show you both how you can handle the background color changes as well as change the button background using a single image as you requested. 此示例将向您展示如何处理背景颜色更改以及如何根据需要使用单个图像更改按钮背景。

CSS CSS

.switched-on {
    background-color: red;
}
.switched-off {
    background-color: white;
}
.btn {
    width:100px;
    height:100px;
    color:white;
    background: url(http://www.feedthebot.com/pagespeed/images/images.png) 0 0 no-repeat gray;
}

HTML HTML

<body>
    <button type="button" id="switchBtn" onclick="handleSwitch();" class="btn">Switch</button>
</body>

JS JS

function handleSwitch() {
            if (document.body.classList == '') {
                document.body.classList.add('switched-on');
                document.querySelector('#switchBtn').style.backgroundPosition = '-100px 0px';
                return;
            }
            if (document.body.classList.contains('switched-on')) {
                document.body.classList.remove('switched-on');
                document.body.classList.add('switched-off');
                document.querySelector('#switchBtn').style.backgroundPosition = '0px 0px';
            } else {
                document.body.classList.remove('switched-off');
                document.body.classList.add('switched-on');
                document.querySelector('#switchBtn').style.backgroundPosition = '-100px 0px';
            }

        }

If you would like to test yourself here is a jsfiddle: http://jsfiddle.net/oee4mr8a/ 如果您想测试一下自己，这里是一个jsfiddle： http : //jsfiddle.net/oee4mr8a/

更改背景颜色

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-03-04 17:36:51

解决方案2
0 2015-03-04 18:12:23

更改背景颜色

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-03-04 17:36:51

解决方案2 0 2015-03-04 18:12:23

解决方案1
1 已采纳 2015-03-04 17:36:51

解决方案2
0 2015-03-04 18:12:23