JavaScript Instance code: Click to set page background

Source: Internet
Author: User
Tags error code return set background xmlns

Article Introduction: sets the background color according to the options.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> "JavaScript daily Practice"-set background color based on options </title>
<script type= "Text/javascript" >
function SetProperty ()
{
var content = document.getElementById ("content");
var sel = document.getElementById ("Selectcolor");
var propertyvalue = Sel.options[sel.selectedindex].value;
content.style["background"] = PropertyValue;
}
</script>

<body>
<div id= "Content" >
<p> Select color and click the button "Set background color". </p>
<select id= "Selectcolor" >
<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 false; > Set Background color </button>
<br/>
<br/>
</div>

</body>

Writing this today wasted a lot of my time, it was a very simple small code but I just can't write the effect. Finally under the Barina I seek the help of the sunylost God, in the language.
I hope you will avoid the previous error code.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> "JavaScript daily Practice"-set background color based on options </title>
<script type= "Text/javascript" >
var content = document.getElementById ("content");
function SetProperty ()
{
var sel = document.getElementById ("Selectcolor");
var propertyvalue = Sel.options[sel.selectedindex].value;
content.style["background"] = PropertyValue;
}
</script>

<body>
<div id= "Content" >
<p> Select color and click the button "Set background color". </p>
<select id= "Selectcolor" >
<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 false; > Set Background color </button>
<br/>
<br/>
</div>

</body>



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.