Question

我正在学习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>

Answer 1

您想要更改html的背景，所以您需要做的是......

function colorize() {
     var element = document.getElementsByTagName("html")[0];
     element.style.backgroundColor = 'blue';
}

您正在使用按钮元素并更改其颜色。你必须选择html标签，因为你想改变通过css分配给它的background-clor属性。

Answer 2

这是你的解决方案调用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>

Answer 3

您需要更改document的背景颜色，而不是element，这是您的按钮。

由于您不熟悉JavaScript，所以让您摆脱一些已经习惯的坏习惯。

不要通过HTML事件属性设置事件处理程序（即onclick，onmouseover等）。这是我们在使用现代标准和最佳实践之前使用的25年以上的技术，因为它易于使用，人们继续使用它。但是 there are a variety of reasons why you should not use this technique ，而是将您的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>

Answer 4

这是你的代码：

foreach ($obj as $key => $value) {
       echo "$key = $value\n";
 }

现在，在着色功能中，您可以根据需要为两种不同的条件编写尽可能多的参数。

单击按钮更改背景颜色

4 个答案: