Question

我尝试按下关闭按钮，当用户点击它时按钮将变为按钮以打开，此事件整个页面的颜色将从经典白色变为红色。

我该怎么办？也可以像这个one一样使用一张图片打开和关闭，当它关闭时有第一个左边部分，当用户点击更改并且右边部分（蓝色）只有一个图像时？ / p>

这里有我所知道的按钮点击

<!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

您可以在if和else的每个分支中添加另一行，以更新HTMLElement.style元素的<html>（从而更改background-color整页）：

＆＃13;

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

＆＃13;

但是，我会建议在JavaScript中绑定您的功能 - 事件处理函数，而不是使用内联HTML事件处理属性（onchange，onclick等），为了便于日后维护：

＆＃13;

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)

＆＃13;

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

＆＃13;

参考文献：

Answer 2

您可以通过多种方式处理此问题。此示例将向您展示如何处理背景颜色更改以及如您所请求使用单个图像更改按钮背景。

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

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

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';
            }

        }

如果你想在这里测试一下，那就是一个jsfiddle： http://jsfiddle.net/oee4mr8a/

更改背景颜色

2 个答案: