使用 HTML CSS 和 JavaScript 设计背景颜色转换器

背景颜色转换器是一个可以轻松更改网页背景颜色的项目。当用户单击其中任何一个时，网页上就会出现颜色框，然后生成的颜色将出现在网页的背景中。它使网页看起来很有吸引力。

文件结构：

索引.html
样式文件
脚本.js

先决条件：需要 HTML、CSS 和 JavaScript 的基本知识。该项目包含 HTML、CSS 和 JavaScript 文件。 HTML 文件添加结构，然后使用 CSS 设置样式，JavaScript 为其添加功能。

HTML 文件：index.html HTML 布局是使用 div 标签、id 属性和用于函数调用的锚标签创建的。它定义了网页的结构。

HTML



  

    
    
  
    Background changer using JavaScript
    

  

    Background changer with a color box
    
         #e58e26
         #f9b4ab
         #B1FB17
         #78e08f
         #fd79a8

CSS

body {
    background: #81ecec;
}
  
h1 {
    color:#6203e0;
}
  
div {
    width:25%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: white;
}
  
#color1 {
    flex: 1;
    background: #e58e26;
    color:#e58e26;
}
  
#color2 {
    flex: 1;
    background: #f9b4ab;
    color: #f9b4ab;
}
  
#color3 {
    flex: 1;
    background: #B1FB17;
    color: #B1FB17;
}
  
#color4 {
    flex: 1;
    background: #78e08f;
    color: #78e08f;
}
  
#color5 {
    flex: 1;
    background: #fd79a8;
    color: #fd79a8;
}

Javascript

const bgchange =(id) => {
    document.body.style.background = 
        document.getElementById(id).innerHTML;
}

CSS 文件：style.css通过使用 CSS 属性，我们将装饰网页并使其看起来有吸引力。颜色、宽度、高度和位置属性根据项目中的要求给出。

CSS

body {
    background: #81ecec;
}
  
h1 {
    color:#6203e0;
}
  
div {
    width:25%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background: white;
}
  
#color1 {
    flex: 1;
    background: #e58e26;
    color:#e58e26;
}
  
#color2 {
    flex: 1;
    background: #f9b4ab;
    color: #f9b4ab;
}
  
#color3 {
    flex: 1;
    background: #B1FB17;
    color: #B1FB17;
}
  
#color4 {
    flex: 1;
    background: #78e08f;
    color: #78e08f;
}
  
#color5 {
    flex: 1;
    background: #fd79a8;
    color: #fd79a8;
}

JavaScript 文件：script.js JavaScript 代码用于为网页提供功能。这里我们使用了带有“id”参数的箭头函数。

Javascript

const bgchange =(id) => {
    document.body.style.background = 
        document.getElementById(id).innerHTML;
}

输出：

选色前：

带颜色框的背景更换器

选色后：

带颜色框的背景更换器