Section 131th, JavaScript, package library--css

JavaScript, Package library--css

Change the method in the package library to the prototype Add method

4 Additional methods

The Tian_jia_class () method adds a class attribute to the obtained element, and the parameter is the Class property value, which can be concatenating 1

The Yi_chu_class () method removes the class attribute from the obtained element, and the parameter is the class attribute value to remove, which can be concatenating 2

She_zhi_link_css () method, set the link connection, or style inline, in CSS style 3

Yi_chu_link_css () method to remove a link connection, or style inline, in CSS style 4

Package Library Code 5

/** *feng_zhuang_ku_1.0 version, JS Package library, 2016/12/29 days: Lin Guixiu **//** Foreground call * Each call to create a library object so that each call is a separate object **/var$ =function () {    return Newfeng_zhuang_ku ();};/** * Define Package library constructor, class library **/functionFeng_zhuang_ku () {/** Jie_dian property, create array, initialize, save get to element node, return array **/     This. Jie_dian = [];}/** Object Description: * This means that the object itself * uses the library, first to $ () to create the object * and then the object to be created in the method or attribute * Outline: * Get the element tag start, line number 18 * element node operation begins, line number * * **//**------------------------------------------------Get element tag start--------------------------------------------**//** Get element Tag Description: * Jie_dian property, save get to element node, return array, * HUO_QU_ID () method, get element label by ID, apply to get single node, * Huo_qu_name_zhi () method, Gets the specified element by the element name value, applies to get form element, * Huo_qu_name () method, gets the element of the same label name through the tag name, * Huo_qu_class () method, gets the node with the same class attribute, adds the acquired node to the Jie_ Dian Property * Guo_lv_jie_dian () method, when fetching multiple nodes, filters the array in the Jie_dian property, filtering out the element object outside the specified index **//** HUO_QU_ID () method, gets the element tag by ID, the parameter is the ID value, adds the acquired element object to the, Jie_dian property, applies to get a single node **/feng_zhuang_ku.prototype.huo_qu_id=function(ID) { This. Jie_dian.push (document.getElementById (id)); return  This;};/** The Huo_qu_name_zhi () method, gets the specified element by the element name value, the parameter is the element name value, the return element is the same as the name value of the object collection, * loops the element collection, adds each loop to the element object to the Jie_dian property, Applies to get form elements **/Feng_zhuang_ku.prototype.huo_qu_name_zhi=function(name) {varName_zhi =document.getelementsbyname (name);  for(vari = 0; i < name_zhi.length; i++) {         This. Jie_dian.push (Name_zhi[i]); }    return  This;};/** Huo_qu_name () method, gets the element of the same tag name through the tag names, * Two parameters: Gets the same tag element under the specified ID, parameter 1 tag name, parameter 2 specifies the range ID value * One parameter: Gets the page all the same tag element, the parameter is the label name **/Feng_zhuang_ku.prototype.huo_qu_name=function(tag, idname) {varnode =NULL; if(Arguments.length = = 2) {node=document.getElementById (idname); } Else{node=document; }    varName =node.getelementsbytagname (tag);  for(vari = 0; i < name.length; i++) {         This. Jie_dian.push (Name[i]); }    return  This;};/** Huo_qu_class () method, gets the node of the same class attribute, adds the obtained node to the Jie_dian property * One parameter: Gets the class attribute node specified by the entire page, the parameter is the Class Property value * Two parameters: Gets the class attribute node in the specified ID area, parameter 1 is the Class property value, and Parameter 2 is the ID value of the specified range **/Feng_zhuang_ku.prototype.huo_qu_class=function(name, idname) {varnode =NULL; if(Arguments.length = = 2) {node=document.getElementById (idname); } Else{node=document; }    varall = Node.getelementsbytagname (' * ');  for(vari = 0; i < all.length; i++) {        if(All[i].classname = =name) {             This. Jie_dian.push (All[i]); }    }    return  This;};/** Guo_lv_jie_dian () method, when fetching multiple nodes, filter the array in the Jie_dian attribute, is to filter out the element object outside the specified index * parameter is to preserve the object index in the Jie_dian attribute **/Feng_zhuang_ku.prototype.guo_lv_jie_dian=function(num) {varelement = This. Jie_dian[num];  This. Jie_dian = [];  This. jie_dian[0] =element; return  This;};/**------------------------------------------------get element tag end--------------------------------------------**//**------------------------------------------------element node operation started--------------------------------------------**//** Element Node operating instructions: * CSS () method, set the SS style for the acquired elements, or get the CSS style, * Wen_ben () method, set the text to the acquired element, or get the text * Click () method, add a click event to the acquired element, The parameter is an anonymous function (containing function function), * Tian_jia_class () method, add Class attribute to the obtained element, parameter is class attribute value, can concatenating * Yi_chu_class () method, remove class attribute to the acquired element, parameter is the Class property value to remove, you can concatenating the * SHE_ZHI_LINK_CSS () method, set the link connection, or style inline, CSS style * YI_CHU_LINK_CSS () method in, remove link connection, or style inline, CSS Styles in **//** CSS () method, set the SS style to the acquired element, or get the CSS style, * Two parameters: Set style, parameter 1 style name, parameter 2 style value, set inline style * One parameter: Get style, parameter is style name, cannot concatenating, get can be used to get in row or get connection **/Feng_zhuang_ku.prototype.css=function(attr, value) { for(vari = 0; I < This. jie_dian.length; i++) {        if(Arguments.length = = 1) {            if(typeofwindow.getComputedStyle! = ' undefined ') {// the                returnwindow.getComputedStyle ( This. Jie_dian[i],NULL) [attr]; } Else if(typeof  This. jie_dian[i].currentstyle! = ' undefined ') {//IE                return  This. Jie_dian[i].currentstyle[attr]; }        } Else {             This. jie_dian[i].style[attr] =value; }    }    return  This;};/** Wen_ben () method, sets the text to the obtained element, or gets the text * has the parameter: sets the text, the argument is the text string to set. * No parameter: Gets the text. Unable to concatenating **/Feng_zhuang_ku.prototype.wen_ben=function(str) { for(vari = 0; I < This. jie_dian.length; i++) {        if(Arguments.length = = 0) {            return  This. jie_dian[i].innerhtml; }         This. jie_dian[i].innerhtml =str; }    return  This;};/** Click () method, add a click event to the acquired element, the parameter is an anonymous function (containing function function), * Loop the node in the Jie_dian attribute, add element Click event for each node of the loop*/Feng_zhuang_ku.prototype.click=function(FU) { for(vari = 0; I < This. jie_dian.length; i++) {         This. Jie_dian[i].onclick =Fu; }    return  This;};/** Tian_jia_class () method, add Class attribute to the obtained element, parameter is class property value, can concatenating **/Feng_zhuang_ku.prototype.tian_jia_class=function(classname) { for(vari = 0; I < This. jie_dian.length; i++) {        if(! This. Jie_dian[i].classname.match (NewRegExp (' (\\s|^) ' + classname + ' (\\s|$) '))) {             This. jie_dian[i].classname + = "+classname; }    }    return  This;};/** Yi_chu_class () method, removes the class attribute from the obtained element, and the parameter is the class attribute value to remove, which can be concatenating **/Feng_zhuang_ku.prototype.yi_chu_class=function(classname) { for(vari = 0; I < This. jie_dian.length; i++) {        if( This. Jie_dian[i].classname.match (NewRegExp (' (\\s|^) ' + classname + ' (\\s|$) '))) {             This. Jie_dian[i].classname = This. Jie_dian[i].classname.replace (NewRegExp (' (\\s|^) ' + classname + ' (\\s|$) '), '); }    }    return  This;};/** SHE_ZHI_LINK_CSS () method, set link connection, or style inline, CSS style in * in Web applications, it is seldom used to add CSS rules and remove CSS rules, usually using only inline and class Because adding and removing the original rules will break the structure of the entire CSS, so use requires great care. * Directly under the library object such as: $ (). SHE_ZHI_LINK_CSS () * Four parameters: * Parameter 1, style sheet index position, is the style sheet position index to manipulate, the number of style sheet "value" parameter 2, the selector name to be added, "string" * Parameter 3, the style name to be added And values, such as: Background: #ff2a16 "string" * parameter 4, add styles and selectors to the style sheet where, "value" **/Feng_zhuang_ku.prototype.she_zhi_link_css=function(num, selectortext, csstext, position) {varSheet =Document.stylesheets[num]; if(typeofSheet.insertrule! = ' undefined ') {sheet.insertrule (Selectortext+ "{" + Csstext + "}", position); } Else if(typeofSheet.addrule! = ' undefined ') {sheet.addrule (Selectortext, csstext, position); }    return  This;};/** YI_CHU_LINK_CSS () method, remove link connection, or style inline, CSS style in the Web app, rarely add CSS rules and remove CSS rules, usually only in line and class Because adding and removing the original rules will break the structure of the entire CSS, so use requires great care. * Directly under the Library object using * Two parameters: * Parameter 1, style sheet index position, is to manipulate the style sheet position index, the number of style sheet "value" parameter 2, delete the number of selectors in the style table "value" **/Feng_zhuang_ku.prototype.yi_chu_link_css=function(num, position) {varSheet =Document.stylesheets[num]; if(typeofSheet.deleterule! = ' undefined ') {sheet.deleterule (position); } Else if(typeofsheet.removerule) {sheet.removerule (position); }    return  This;};/**------------------------------------------------element node operation End--------------------------------------------**/

Foreground Call Code 6

//Foreground Call CodeWindow.onload =function (){    /*$ (). Huo_qu_class (' HJ ', ' a '). Guo_lv_jie_dian (0). css (' color ', ' #ff2a16 ');    $ (). Huo_qu_class (' HJ ', ' a '). Guo_lv_jie_dian (1). css (' color ', ' #ff2a16 ');    $ (). Huo_qu_class (' HJ ', ' a '). Guo_lv_jie_dian (2). CSS (' color ', ' #ff2a16 ');    $ (). Huo_qu_class (' HJ ', ' a '). Guo_lv_jie_dian (3). CSS (' color ', ' #ff2a16 ');    $ (). Huo_qu_class (' HJ ', ' a '). Wen_ben (' reset '); $ (). Huo_qu_class (' HJ ', ' B '). Tian_jia_class (' B '). Tian_jia_class (' C '). Tian_jia_class (' d '). Yi_chu_class (' B '). Yi_ Chu_class (' C '). Yi_chu_class (' d ');*/$ (). HUO_QU_ID (' Li '). css (' Background-color ', ' #ff2a16 ')); $ (). HUO_QU_ID (' Li2 '). CSS (' Background-color ', ' #fff133 '));};

Section 131th, JavaScript, package library--css