时间戳

首页 > 解决方案 > 如何修复代码以淡化按钮并在单击时将按钮更改为蓝色？

javascript - 如何修复代码以淡化按钮并在单击时将按钮更改为蓝色？

问题描述

我正在尝试创建一个 javascript 事件，单击button2它会将框更改为蓝色。单击button3它会淡化该框。

我还有其他两个动作会导致button1增长并button4重置它，但我无法让其他两个动作。我需要在代码中修复什么？

document.getElementById("button1").addEventListener("click",function(){
  document.getElementById("box").style.height = "250px";
})

document.getElementById("button2").addEventListener("click",function(){
  document.getElementById("box").style.backgroundcolor = "blue";
});

document.getElementById("button3").addEventListener("click",function(){
  document.getElementById("box").fadeOut();
});

document.getElementById("button4").addEventListener("click",function(){
   document.getElementById("box").style.height = "100px";
});

标签： javascriptfunctionevents

解决方案

关于按钮 2，样式属性区分大小写，您正在寻找backgroundColor：

document.getElementById("box").style.backgroundColor = "blue";

关于按钮 3，没有原生 javascriptfadeOut()函数，我假设您正在尝试使用同名的 jQuery 函数。为此，您需要确保包含 jQuery 并使用 jQuery 选择器选择元素：

$('#box').fadeOut();

请参阅以下代码段：

document.getElementById("button1").addEventListener("click",function(){
  document.getElementById("box").style.height = "250px";
})

document.getElementById("button2").addEventListener("click",function(){
  document.getElementById("box").style.backgroundColor = "blue";
});

document.getElementById("button3").addEventListener("click",function(){
  $('#box').fadeOut();
});

document.getElementById("button4").addEventListener("click",function(){
   document.getElementById("box").style.height = "100px";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<button id="button4">Button 4</button>

<div id="box" style="height: 50px; width: 300px; background-color: #ff0000; margin-top: 10px;">
 &nbsp;
</div>

推荐阅读