javascript - 如何制作多个按钮来更改不同的 div 背景颜色?

标签 javascript html css dom

看看我要做什么: https://codepen.io/SomeRandomGuy0/pen/aWvGxO

我能够使用“蓝色”按钮使正方形的颜色发生变化。我想要做的是制作多个按钮,将正方形的颜色更改为按钮中显示的颜色。例如,如果我单击一个显示为“绿色”的按钮,则该正方形将变为绿色,如果我单击另一个显示为“紫色”的按钮,该正方形将变为紫色。

我正在学习 JavaScript 中的 DOM,很抱歉回答这样一个基本问题。

HTML:

<html>
  <head>
    <meta charset = "UTF-8" />
    <title>DOM Practice</title>
  </head>
  <body>
    <div id = 'square'></div>
    <button onClick = changeColor() >Blue</button>
  </body>
</html>

CSS:

#square{
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript:

function changeColor(){
  var elem = document.getElementById( 'square' );
  elem.style.backgroundColor = 'blue';
}

最佳答案

您可以在按钮调用函数时将颜色作为参数传递

检查这个密码笔

https://codepen.io/anon/pen/BRoPJo

    <button onClick = changeColor('Blue') >Blue</button>
    <button onClick = changeColor('green') >green</button>
    <button onClick = changeColor('yellow') >yellow</button>

JS

    function changeColor(color){
     var elem = document.getElementById( 'square' );
     elem.style.backgroundColor =color;  
    }

关于javascript - 如何制作多个按钮来更改不同的 div 背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43477159/

相关文章:

jquery - 使用 Handlebars 将 JSON 显示为 HTML(不带 'pre' 标签)

javascript - 网页编辑器,以便在我更新 JavaScript 和 HTML 时刷新页面

javascript - (php/jquery) 根据另一个选中的复选框值隐藏和显示复选框

javascript - Angular 路线参数未定义

javascript - 在禁用的 HTMLElement 上触发事件

javascript - JSON Stringify 未在 <pre> 标记中正确缩进

php - googlemaps 文档类型错误

javascript - 使用 jQuery.when() 调用两个 Html2Canvas 调用

javascript - 如何使粘性 div 位于其他内容之上

javascript - 样式组件在重新渲染时不应用过渡效果?