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