Implementation code of front-end HTML skin changing function

Implementation code of front-end HTML skin changing function

50 lines of code to change 5 skin colors, including transparent

I'll give you the code first, you can use it yourself. Just create an HTML file and paste it in to use it. You can't use it casually.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#box{width: 100%;height:100%;background-color: red;position: absolute;top:0;left:0;right:0;bottom:0;}
	#box>div{float:right;width: 30px;height: 30px;margin:10px;border: 1px #333 solid;}
	#box1{background-color: red}
	#box2{background-color: yellow}
	#box3{background-color: blue}
	#box4{background-color: green}
	</style>
</head>
<body>
	<div id="box">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</body>
<script>
	var box = document.getElementById('box');
	var box1 = document.getElementById('box1');
	var box2 = document.getElementById('box2');
	var box3 = document.getElementById('box3');
	var box4 = document.getElementById('box4');
	var box5 = document.getElementById('box5');
	box1.onclick = function(){
		box.style.backgroundColor = 'red';
	}
	box2.onclick = function(){
		box.style.backgroundColor = 'yellow';
	}
	box3.onclick = function(){
		box.style.backgroundColor = 'blue';
	}
	box4.onclick = function(){
		box.style.backgroundColor = 'green';
	}
	box5.onclick = function(){
		box.style.backgroundColor = 'transparent';
	}
</script>
</html>

The code is condensed and easy to understand.

I won't talk about the basic HTML tags, let's talk about the text style under body first

<body>
	<div id="box">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</body>

Finally, we will use JS. If we name it with "id" here, we can write less code later.

insert image description here

This big red box is #box. I added a default color to it. If no color is added, it will be transparent.
I added borders to each box to make it easier to distinguish between blocks.

insert image description here

There is a difference between the first and fourth ones. The difference is that the color of the first one is transparent, while the color of the second one is red - the same as the base color.

<style>
	#box{width: 400px;
	height: 400px;background-color: red;border: 1px #000 solid;}
	#box>div{float:right;width: 30px;
	height: 30px;margin:10px;border: 1px #333 solid;}
	#box1{background-color: red}
	#box2{background-color: yellow}
	#box3{background-color: blue}
	#box4{background-color: green}
	#box5{}
	</style>

This is the Css style.

width: set the box width; height: set the box height; background-color: set the box background color; border: set the box border
(1px is the thickness of the border, #333 is the hexadecimal color, solid is the border style, solid represents a solid line); float: is floating
(The bottom of the box is full of water, and the box floats; left means floating to the left, and right means floating to the right); margin: is the outer margin
(Boxes don’t like to be squeezed together, so to avoid squeezing, we give them some clearance from anything above, below, left, or right);

red is red; yellow is yellow; blue is blue; green is green

var box = document.getElementById('box');
	var box1 = document.getElementById('box1');
	var box2 = document.getElementById('box2');
	var box3 = document.getElementById('box3');
	var box4 = document.getElementById('box4');
	var box5 = document.getElementById('box5');

This is a DOM selector that selects each box individually for easier understanding. If you want to check all the boxes,
var boxes = box.SelectorAll('div');
This sentence will select all

box1.onclick = function(){
		box.style.backgroundColor = 'red';
	}

The meaning of this sentence is:
Select the box you want to operate

insert image description here

It’s the last one—the little red square.

The box is given a click event (onclick), function(){} is the function to be executed.

When box1 is onclicked, box will function(){}

This is easy to understand, so let's take a look at what is inside function(){}

insert image description here
It’s so simple, just this one sentence.
This sentence means to change the background color of the box to red;

style: style, style; backgroundColor: background color; (In JS, " - "
It usually cannot be used normally, so it is replaced by the first letter of the next word capitalized, that is:
background-color ==> backgroundColor );

Final:

box.style.backgroundColor = 'transparent';

The transparent in here is the default value of the background color. Writing it like this means restoring its original appearance, which is transparent.

Summarize

This is the end of this article about the implementation code of the front-end html skin changing function. For more relevant front-end html skin changing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  CSS position fixed left and right double positioning implementation code

>>:  How to hide elements on the Web and their advantages and disadvantages

Recommend

Differences between proxy_pass in two modules in nginx

1. The proxy_pass directive of the 1.ngx_stream_p...

Detailed tutorial on how to compile and install mysql8.0.29 in CentOS8 deployment LNMP environment

1. Prerequisites Since I have installed it severa...

React Principles Explained

Table of contents 1. setState() Description 1.1 U...

Implementing the preview function of multiple image uploads based on HTML

I recently wrote a script for uploading multiple ...

How to connect Django 2.2 to MySQL database

1. The error information reported when running th...

Detailed explanation of how to automatically refresh the page and refresh method after deleting Vue list data

Problem description: After the front-end deletes ...

Detailed explanation of the solution to font blur when using transform in CSS3

This question is very strange, so I will go strai...

mysql8.0.0 winx64.zip decompression version installation and configuration tutorial

This article records the installation tutorial of...

React gets input value and submits 2 methods examples

Method 1: Use the target event attribute of the E...

Detailed explanation of three commonly used web effects in JavaScript

Table of contents 1 element offset series 1.1 Off...

Creating private members in JavaScript

Table of contents 1. Use closures 2. Use ES6 clas...

Analyze several common solutions to MySQL exceptions

Table of contents Preface 1. The database name or...

Encoding problems and solutions when mysql associates two tables

When Mysql associates two tables, an error messag...

Detailed explanation of primitive values ​​and reference values ​​in ECMAScript

Table of contents Preface What are dynamic proper...

XHTML Web Page Tutorial

This article is mainly to let beginners understan...