Home > Developer > JavaScript
To set the style of an element by using the ClassName property:
The id= "P1" element is added to the "class name one" style by classname. When you click the "Add Style" button, the first paragraph of text adds a style.
The id= "P2" element is modified by classname to the style "class name is two". When you click the "Change Appearance" button, the second paragraph of text changes style.
Code:
<! DOCTYPE html><html><head><meta http-equiv="Content-type" Content="text/html; charset=gb2312 "><title>ClassName Property</title><style> Body{ font-size:px;} . One{ border:1px solid #eee; width:px; height:px; background:#ccc; color:red; } . the{ border:1px solid #ccc; width:px; height:px; background:#9CF; color:blue; } </style></head><body> <p id="P1" >JavaScript enables Web pages to display dynamic effects and to interact with the user.</P> <input type="button" value="Add Style" onclick ="Add ()"/> <p id="P2" class="One">JavaScript enables Web pages to display dynamic effects and to interact with the user.</P> <input type="button" value="Change appearance" onclick= "Modify ()"/> <script type="Text/javascript"> function add(){var p1 = document.getElementById ("P1"); P1.classname="one"; } function modify(){var p2 = document.getElementById ("P2"
); P2.classname="the other"; } </script></body></html>Pre-set Demo effect:
Post-Setup Demo effect:
task Source: MU class web--"Getting Started with JavaScript"--Control class name (ClassName property)
Write "Change Color", "Change the height", "Hide Content", "Show content", "Cancel Settings" function, click the corresponding button to do the corresponding action, click on the "Cancel Settings" button, prompt whether to cancel the setting, if the action, otherwise do not do.
Code:
<! DOCTYPE html><html><head><meta http-equiv= "txttent-type" txttent="text/html; Charset=utf-8 " /><title>Javascript</title><style type="Text/css">Body{font-size:px;} #txt{ height: +px; width:px; Border:#333 solid 1px; padding:5px; }P{ line-height:px; text-indent:2em; }</style></head><body> <h2 id="Con">JavaScript courses</H2> <div id="txt"> <h5>JavaScript adds a dynamic effect to a Web page and enables the ability to interact with the user.</h5> <p>1. JavaScript primer, so that you do not understand JS, quickly understand JS.</P> <p>2. JavaScript advanced, let you master the basic syntax of JS, functions, arrays, events, built-in objects, BOM browser, Dom operations.</P> <p>3. After learning the above two basic courses, in-depth study of javascript variable scope, events, objects, motion, cookies, regular expressions, Ajax and other courses.</P> </div> <form> <!--When you click the appropriate button, do the appropriate action, add the corresponding event to the button-- <input type="button" value="Change color" onclick= "Set.changecolor ()"> <input type="button" value="Change width to height" onclick=" Set.changesize () "> <input type="button" value="hidden content" onclick= "Set.objhide ()"> <input type="button" value="Show content" onclick=" Set.objshow () "> <input type="button" value="de-set" onclick= "Set.offset ()"> </form> <script type="Text/javascript"> varTxt=document.getelementbyid ("TXT");varset={ChangeColor: function(){Txt.style.color="Red"; Txt.style.backgroundcolor="#ccc"; }, Changesize: function(){Txt.style.width="300px"; txt.style.height="300px"; }, Objhide: function(){txt.style.display="None"; }, Objshow: function(){txt.style.display="Block"; }, OffSet: function(){ varMessage=confirm ("Are you sure you want to reset all settings?" ");if(message==true) {Txt.removeattribute (' style '); } } }</script></body></html>Pre-set Demo effect:
Post-Setup Demo effect:
Change color:
Change the width of the height:
Hidden content:
task Source: MU class web--"Getting Started with JavaScript"--programming challenges
Front-end Practice--javascript--Control class name (ClassName property) + change style
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
