Encapsulate class functions in JavaScript learn notes

Encapsulation: Throws the same function code into a function and repeats the call.
Encapsulate CSS functions: 1, you can get the element's style 2, you can modify the style of the element.
The encapsulation process is circular and gradual, step-by-step.
This section 第一、二、三、五、六 common CSS:

#div1 {width:100px; height:150px; background:red;}

This section 第一、二、三、五、六 common HTML:

<div id= "Div1" ></div>

Encapsulation First step:
Js:
function A (idname) {

       return document.getelementbyid (idname);   }       window.onload = function () {           & Nbsp;  var odiv = a (' Div1 ');               odiv.onclick = function () {               //alert (oDiv.style.width); //style  can only get the style between the write rows.                        alert (oDiv.currentStyle.width);  //ie Browser-specific properties that are not supported by standard browsers. Currentstyle: Objects;                       alert (getComputedStyle (odiv,false). Height);            //Standard Browser Method,ie6/7/8     &Nbsp;            };          /*    getcomputedstyle:         The first parameter:  specifies which element to get the style of.              The second parameter:  is of no practical significance, completely for backward compatibility, and can be any valid variable value.       */         };

Encapsulates the second step:

Function a (idname) {       return document.getelementbyid (idName);    }      window.onload = function () {               var odiv = a (' Div1 ');               odiv.onclick = function () {                   //alert (oDiv.style.width); //style  Can only get the style between the write rows.                     

  if (odiv.currentstyle) {                          alert (oDiv.currentStyle.width);  / /ie Browser-Unique properties, not supported by standard browsers.                       }else{                           alert ( getComputedStyle (odiv,false). width);           //Standard browser method, IE6 /7/8                       }                   };  /*    getcomputedstyle:         first parameter:  Specifies the style of the element to get.              The second parameter:  is of no practical significance, completely for backward compatibility, and can be any valid variable value.   */         };

Encapsulation Step three:

Function a (idname) {          return document.getelementbyid ( Idname);          }      window.onload =  function () {              var odiv =  a (' Div1 ');              odiv.onclick =  function () {                   alert (this, ' height ');    //Pass Parameters                     };               function css (obj,attr) {   //Accept Parameters                        if (obj.currentstyle) {                           return obj.currentStyle[attr];                       }else{                            return getcomputedstyle (obj,false) [attr];                                    }                   }         /*    obj.style.width& nbsp;/ obj[' style ' [' Width ']    */                /*  getcomputedstyle:         first parameter:  Specifies the style of the element to get.              The second parameter:  is of no practical significance, completely for backward compatibility, and can be any valid variable value.     */  };

Encapsulation Step Fourth:

HTML: <div id= "Div1"  style= " width: 200px;" ></div>   js:function a (idname) {          return& Nbsp;document.getelementbyid (idname);          }       Window.onload = function () {               var odiv = a (' Div1 ');               oDiv.style.width =  ' 300px ';               odiv.onclick = function () {                   //alert (this, ' height ');                    //alert (CSS (this, ' backgroundcolor '));                                       alert (CSS (this, ' width '));                           };              function css (obj,attr) {                     

  if (obj.currentstyle) {                          return obj.currentStyle[attr];                        }else{                 & nbSp;        return getcomputedstyle (Obj,false) [attr];                                   }                   }         / *    Get the element style to note three points:        1, can only get, cannot be set.             2, gets the computed style.    after the calculated style:  the final effective style.             3, only non-composite styles can be obtained.         composite style:    &NBSP;&NBSP;&NBSP;&NBSP;BACKGROUND&NBSP;:&NBSP;COLOR&NBSP;/&NBSP;IMAG e / position / repeat...        margin / padding  / border / font ...                  border-width:  border-left-top...        non-composite style:        width /& nbsp;height ...            background-color;    * /  };   Encapsulation Step Fifth: Function a (idname) {           Return document.getelementbyid (idname);          }       window.onload = function () {           & Nbsp;  var odiv = a (' Div1 ');           

   //oDiv.style.width =  ' 300px ';              odiv.onclick = function () {                  //alert (The CSS (this, ' height '));                    //alert (CSS ( This, ' BackgroundColor ');                                       //alert (this, ' width ');                            css (this, ' width ', ' 300px ');                  };               function css (obj,attr,val) { 

            /*                 if (Obj.currentstyle) {                         return  obj.currentstyle[attr];                     }else{               

         return getcomputedstyle (Obj,false) [attr];                                 }  */              obj.style[attr] = val;                     }       
  
/*    Get the element style to note three points:        1, can only get, cannot be set.             2, gets the computed style.    after the calculated style:  the final effective style.             3, only non-composite styles can be obtained.         composite style:    &NBSP;&NBSP;&NBSP;&NBSP;BACKGROUND&NBSP;:&NBSP;COLOR&NBSP;/&NBSP;IMAG e / position / repeat...        margin / padding  / border / font ...                   border-width: border-left-top...        non-composite style:

        width / height ...            background-color;    */  };   Encapsulation Sixth step: Function a (Idname) {       &nbsP;  return document.getelementbyid (idname);           }      window.onload = function () {                  //var odiv = document.getelementbyid (' Div1 ');        var odiv=a (' Div1 ');           

   //oDiv.style.width =  ' 300px ';         

    odiv.onclick = function () {                  //alert (this, ' height ');                    //alert css (this, ' BackgroundColor ');                                       Alert (CSS (this, ' width '));                              //css (this, ' width ', ' 300px ');

                  };              function css (obj,attr,val) {                       //if ( ARGUMENTS.LENGTH&NBSP;==&NBSP;2) {           if (!val) {                                    if (obj.currentstyle) {                                   return obj.currentStyle[attr];                                }else{                                    return getcomputedstyle (obj,false) [attr];                                             }                       }else{                   //alert (' abc ');                obj.style[attr] = val;                       }                   }         /*    Get the element style three points to note: &

nbsp       1, can only be obtained, cannot be set.             2, gets the computed style.    after the calculated style:  the final effective style.             3, only non-composite styles can be obtained.         composite style:    &NBSP;&NBSP;&NBSP;&NBSP;BACKGROUND&NBSP;:&NBSP;COLOR&NBSP;/&NBSP;IMAG e / position / repeat...    &NBSP;&NBSP;&NBSP;&NBsp;margin / padding / border / font ...                  border-width: border-left-top...         non-composite style:        width / height ...             background-color;  */  };