This is an application of a simple DOM model:
：
A: Original state:B: After clicking on the red area
C: Change the font color after clicking the drop-down box
Specific introduction:
This is the click of the color block above, to make the font appear different colors
1, the first use of the Div object, the property contains the OnClick object
Then set: Var Col=node.style.backgroundcolor;
document.getElementById ("divID"). Style.color=col;
2, the time triggered in select must have an event onchange= "Changcolor2 ()" Used
in Var nodes=document.getelementsbyname ("Selectname") [0];//Gets the Select object
var Text=document.getelementbyid ("divID");//Set the object
var Col=nodes.value;
Text.style.color=col;
Note : Get the data in the drop-down box to get the value in <selelct>
How the drop-down box obtains the value code:
<span style= "White-space:pre" ></span>function Changcolor2 () {var nodes=document.getelementsbyname (" Selectname ") [0];//obtains the Select object var text=document.getelementbyid (" divID ");//Set the object var Col=nodes.value; Text.style.color=col;<body> Style Code
<div style= "background-color:red" onclick= "Changcolor (This)" ></div> <div style= " Background-color:blue "onclick=" Changcolor (This) "></div> <div style=" Background-color:green " Onclick= "Changcolor (This)" ></div>The rest can be implemented with event trigger and style settings
Full code
<! DOCTYPE html>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. I hope you have more advice
DOM Model--Simple color block display
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
