Action class

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6 </head>
  7 <script type="text/javascript">
  8 window.onload=function(){
  9 var box=document.getElementById("box");
 10 varButton1 = document.getElementById ( " Button1 " );
 . 11  button1.onclick = function () {
 12 is  / * 
13 is  to modify the style of box
 14  is modified by the style element style properties, each modify a style, the browser will need to re-render page
 15  of such poor performance is performed, and this form, when we want to modify the plurality of patterns is not very convenient
 16  modified class attribute in box
 17  , we can modify the style indirectly by modifying the class attribute element
 18  so As a result, we only need to modify once, you can simultaneously modify multiple styles
 19  browser only need to re-render the page again, performance is better,
 20  and in this way, can the performance and conduct further separation
 21  * / 
22  // = box.style.width "2000px"; 
23 is  var B2 =document.getElementById ( " B2 " );
 24  // B2 b1 style to overwrite the 
25  // box.className = "B2"; 
26 is  // B2, B3 also has a pattern 
27  // box.className + = "B3" ; 
28  // . addClass (Box, B3); 
29  // Alert (hasClass (Box, "B2")); 
30  // removeClass (Box, "B2"); 
31 is  // . addClass (Box, "B4"); 
32  Alert (hasClass (Box, " B4 " ));
 33 is  
34 is  IF (hasClass (Box, " B4 "))
 35 removeClass (Box, " B4 " );
 36  the else 
37 [  . addClass (Box, " B4 " );
 38 is  
39  };
 40  };
 41 is  
42 is  / * define a function for adding a specified value to a class attribute element
 43  parameters
 44 is  obj class attribute to add elements
 45  CN class to add the value
 46 is  * / 
47  function . addClass (obj, CN)
 48  {
 49  // whether the check obj containing the CN 
50  iF ( ! hasClass (obj, CN))
 51 is  obj .className + = " " + CN;
 52 is  }
 53 is  
54 is  / * 
55  determines an element whether it contains the specified class attribute value
 56  if the class, it returns true, no false returns
 57 is  * / 
58  function hasClass (obj, CN) {
 59  / * 
60  determines there is no obj class CN
 61 is  to create a regular expression
 62 is  * / 
63 is  // var REG = / \ BB2 \ B /; write such a die, the method by the constructor 
64  var REG = new new the RegExp ( " \\ B " + CN + " \\ B " );
 65  returnreg.test (obj.className);
 66  }
 67  
68  / * 
69  Remove a specified element class attribute
 70  * / 
71 is  function removeClass (obj, CN) {
 72  // create a regular expression 
73 is  var REG = new new the RegExp ( " \\ B " + CN + " \\ B " );
 74  // delete class 
75  obj.className = obj.className.replace (REG, "" );
 76  }
 77  
78  / * 
79 toggleClass a class can be used to switch
 80  if the element has a class, then remove
 81  if there are no such elements, then add
 82  * / 
83  function toggleClass (obj, CN)
 84  {
 85  IF (hasClass (obj, CN))
 86  removeClass (obj, CN);
 87  the else 
88  . addClass (obj, CN);
 89  }
 90    </ Script > 
91 is  < style type = "text / CSS" > 
92  .b1 { 
93  width : 100px ; 
94  height : 100px ;
 95 background-color:red;
 96 }
 97 .b2{
 98 width:200px;
 99 height:200px;
100 background-color:yellow;
101 }
102 .b3{
103 height:300px;
104 background-color:yellow;
105 }
106 .b4{
107 background-color:green;
108 } 
109  </ style > 
110  < body > 
111  < Button ID = "Button1" > after clicking the button edit box styles </ Button > 
112  < br > < br > 
113  < div ID = "box" class = "B1" > </ div > 
114  </ body > 
115  </ HTML >
Guess you like
