Front-end Practice--javascript--Control class name (ClassName property) + change style

Last Update:2016-05-13 Source: Internet

Author: User

Tags variable scope

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More