Fatal编程技术网
  • javascript/
  • Javascript 如何制作多个按钮以更改不同的div背景色？

Javascript 如何制作多个按钮以更改不同的div背景色？

javascript html css dom

Javascript 如何制作多个按钮以更改不同的div背景色？,javascript,html,css,dom,Javascript,Html,Css,Dom,看看我想做什么： 我能够使用“蓝色”按钮使正方形的颜色改变颜色。我想做的是制作多个按钮，将正方形的颜色更改为按钮中显示的颜色。例如，如果我单击一个显示“绿色”的按钮，正方形将变为绿色，如果我单击另一个显示“紫色”的按钮，正方形将变为紫色 我正在用JavaScript介绍DOM，很抱歉问了这么一个基本的问题 HTML： <html> <head> <meta charset = "UTF-8" /> <title>DOM Pra

看看我想做什么：

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

我正在用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>

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

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

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

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

function changeColor(){
  var elem = document.getElementById( 'square' );
  elem.style.backgroundColor = 'blue';
}
最简单的方法是更新
changeColor（）
以获取
color
的参数。 那么比如说,

Javascript:

function changeColor(color){
  var elem = document.getElementById( 'square' );
  elem.style.backgroundColor = color;
}
然后在HTML中，我们可以执行以下操作：

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


DOM实践
蓝色
红色
这将使我们能够通用化
changeColor（）
函数，并使其在未来的应用程序中更加可重用

最简单的方法是更新
changeColor（）
以获取
color
的参数。 那么比如说,

Javascript:

function changeColor(color){
  var elem = document.getElementById( 'square' );
  elem.style.backgroundColor = color;
}
然后在HTML中，我们可以执行以下操作：

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


DOM实践
蓝色
红色
这将使我们能够通用化
changeColor（）
函数，并使其在未来的应用程序中更加可重用

在函数中使用if/else语句，我不会为您这样做，但逻辑应该是，如果单击蓝色按钮，则更改为蓝色，如果单击红色按钮，则更改为红色，依此类推。

在函数中使用if/else语句，我不会为您这样做，但逻辑应该是，如果单击蓝色按钮，则更改为蓝色，如果单击红色按钮，则更改为红色，依此类推。

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

检查这个密码笔

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

检查这个密码笔

数据属性在这方面非常有用：我还喜欢使用
rel
将js挂接到标记中，而不是类中，以保持内容的清晰

<div class='square' rel='box'></div>

<ul class='color-list' rel='box-colors'>
 <li class='color' data-color='red'>red</li>
 <li class='color' data-color='blue'>blue</li>
 ...
</ul>

数据属性在这方面非常有用：我还喜欢使用
rel
将js挂接到标记中，而不是类中，以保持内容的清晰

<div class='square' rel='box'></div>

<ul class='color-list' rel='box-colors'>
 <li class='color' data-color='red'>red</li>
 <li class='color' data-color='blue'>blue</li>
 ...
</ul>

编辑——这种方法在IMO中是最简单的

HTML:

原创——一个玩css变量的借口 以下是一种方法：

const colors=[“红色”、“橙色”、“黄色”、“绿色”、“蓝色”、“靛蓝”、“紫色”]；
const getRandomColor=（）=>colors[Math.floor（Math.random（）*colors.length）]
const selectColor=（color）=>document.body.style.setProperty（'--current'，color）；
document.addEventListener（'DOMContentLoaded'，e=>{
const preview=document.getElementById（'square'）；
常量changeColor=（e）=>{
让color=getComputedStyle（e.currentTarget）.getPropertyValue（'--color name'）；
选择颜色（颜色）；
让logStyles=`
颜色：黑色；
字体大小：粗体；
背景色：${color}；
字号：18px；`；
log（`color已更改为%c${color}`，logStyles）；
}
//1.选择紫色作为起始颜色
//2.创建按钮
//注意：我通过编程创建了按钮，但是您也可以轻松地
// 
//红色的
//橙色的
//等等。。。
选择颜色（“丽贝卡紫色”）
颜色。forEach（（颜色，i）=>{
let button=document.createElement（'button'）；
button.style.setProperty（'--color name'，color）；
button.onclick=changeColor；
button.textContent=颜色；
document.body.appendChild（按钮）；
})
})
正文{
--当前：“绿色”；
}
#方格{
背景色：var（--电流）；
宽度：150px；
高度：150像素；
边缘底部：15px；
}
钮扣{
填充：8px 16px；
背景：白色；
边框：1px实心#F3；
颜色：var（--颜色名称）；
右边距：8px；
}

DOM实践
EDIT——这种方法在我看来是最简单的

HTML:

原创——一个玩css变量的借口 以下是一种方法：

const colors=[“红色”、“橙色”、“黄色”、“绿色”、“蓝色”、“靛蓝”、“紫色”]；
const getRandomColor=（）=>colors[Math.floor（Math.random（）*colors.length）]
const selectColor=（color）=>document.body.style.setProperty（'--current'，color）；
document.addEventListener（'DOMContentLoaded'，e=>{
const preview=document.getElementById（'square'）；
常量changeColor=（e）=>{
让color=getComputedStyle（e.currentTarget）.getPropertyValue（'--color name'）；
选择颜色（颜色）；
让logStyles=`
颜色：黑色；
字体大小：粗体；
背景色：${color}；
字号：18px；`；
log（`color已更改为%c${color}`，logStyles）；
}
//1.选择紫色作为起始颜色
//2.创建按钮
//注意：我通过编程创建了按钮，但是您也可以轻松地
// 
//红色的
//橙色的
//等等。。。
选择颜色（“丽贝卡紫色”）
颜色。forEach（（颜色，i）=>{
let button=document.createElement（'button'）；
button.style.setProperty（'--color name'，color）；
button.onclick=changeColor；
button.textContent=颜色；
document.body.appendChild（按钮）；
})
})
正文{
--当前：“绿色”；
}
#方格{
背景色：var（--电流）；
宽度：150px；
高度：150像素；
边缘底部：15px；
}
钮扣{
填充：8px 16px；
背景：白色；
边框：1px实心#F3；
颜色：var（--颜色名称）；
右边距：8px；
}

DOM实践
Wow。我从来没有想过这个。这真的很管用。我从来没有想过这个。这真的很有效。谢谢你的密码笔。它给了我一个很好的视觉效果。谢谢你的代码笔。它给了我一个很好的视觉效果