Instance JavaScript code
In the following code, we set the Name property of the Select element to specify which property of the style to access (in this case the background color), so that the function can be used to set different CSS properties.
Copy Code code as follows:
<script type= "Text/javascript" >
var d = document.getElementById ("D");
function SetProperty () {
var set = document.getElementById ("SetColor");
var optionValue = Set.options[set.selectedindex].value;
D.style.backgroundcolor = OptionValue;
}
function Reset () {
D.style.backgroundcolor = "Transparent";
}
</script>
HTML code
The HTML code for this example is relatively simple, and a SELECT element is used to list the optional background color. The button is responsible for triggering the event and calling the function.
Copy Code code as follows:
<select id= "SetColor" >
<option value= "Aqua" >aqua</option>
<option value= "BLACK" >black</option>
<option value= "Blue" >blue</option>
<option value= "Fuchsia" >fuchsia</option>
<option value= "Gray" >gray</option>
<option value= "Green" >green</option>
<option value= "Lime" >lime</option>
<option value= "Maroon" >maroon</option>
<option value= "Navy" >navy</option>
<option value= "Olive" >olive</option>
<option value= "Purple" >purple</option>
<option value= "Red" >red</option>
<option value= "Silver" >silver</option>
<option value= "Teal" >teal</option>
<option value= "White" >white</option>
<option value= "Yellow" >yellow</option>
</select>
<button onclick= "SetProperty (); return fales;" > Set Background color </button>
<button onclick= "Reset (); return fales;" > Cancel </button>
Effect
Select the color and click the button "Set background color."
<div id= "D" > <select id= "setcolor" > <option value= "Aqua" >aqua</option> <option value= "Bla" CK ">black</option> <option value=" Blue ">blue</option> <option value=" Fuchsia ">fuchsia </option> <option value= "Gray" >gray</option> <option value= "Green" >green</option> <option value= "Lime" >lime</option> <option value= "maroon" >maroon</option> <option value= "Navy" >navy</option> <option value= "Olive" >olive</option> <option value= "Purple" >purple </option> <option value= "Red" >red</option> <option value= "Silver" >silver</option> <option value= "Teal" >teal</option> <option value= "white" >white</option> <option value= " Yellow ">yellow</option> </select> <button onclick=" SetBackgroundColor (); return fales; " > Set Background color </button> <button onclick= "Reset (); return fales;" > Cancel </button> </div> <p> </p> <script type= "Text/javascript" >//<! [cdata[var d = document.getElementById ("D"); function SetBackgroundColor () {var set = document.getElementById ("SetColor"); var optionValue = Set.options[set.selectedindex].value; D.style.backgroundcolor = OptionValue; function Reset () {D.style.backgroundcolor = "transparent"; }//]]></script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
