JavaScript common methods and Functions (SetAttribute and GetAttribute)

Source: Internet
Author: User

Record only new knowledge and examples of learning, stemless goods.

1.setAttribute and GetAttribute (Attribute: Properties)

SetAttribute: Adds the specified property to the element and assigns it a value, or only sets or alters its value if the specified property already exists.

Calling method: Element.setattribute (Attributename,attributevalue)

This is a method with no return value, IE8 and below are not supported.

GetAttribute: Returns the property value for the specified property name.

Calling method: Element.getattribute (AttributeName)

The return value is a string

Summary: AttributeName is the attribute name of the element, AttributeValue is the attribute value of the element, both of which are character types

Example:

1 varcomm={2     //SetAttr is a method for object comm that sets properties for an element3     //e is a formal parameter, which represents the element name; strname is a formal parameter that represents the name of the property being set; strvalue is a parameter that represents the value of the property being set .4SetAttr:function(e,strname,strvalue) {5 E.setattribute (strname,strvalue);6     },7     //GetAttr is a method for object comm that gets the element properties8     //e is the formal parameter, which represents the element name; strname is a formal parameter that represents the name of the property being set, no value9GetAttr:function(e,strname) {Ten         returnE.getattribute (strName); One     } A}

The above is a way to customize an object that is used to set properties on an element.

An example of a change to the invocation object implementation element property is as follows:

1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4     <MetaCharSet= "UTF-8">5     <Scripttype= "Text/javascript"src=.. /.. /js/system.js></Script>6     <title></title>7     <styletype= "Text/css">8 . Red{9 width:260px;Ten Height:100px; One Line-height:100px; A text-align:Center; - Border:Solid 1px Red; - margin:Auto; the         } - . Blue{ - width:260px; - Height:100px; + Line-height:100px; - text-align:Center; + Border:Solid 1px Blue; A margin:Auto; at         } -     </style> - </Head> - <Body> - <DivID= "a"class= "Red">hello,js!</Div> - <DivID= "B">hello,js2!</Div> in <BR/> - <inputtype= "button"value= "Point I change Color"ID= "Bitred"/> to <Scripttype= "Text/javascript"> +     //defines a variable clasname that holds the class attribute value of an element obtained with ID number a using comm.getattr -     varClasname=comm.getattr ($$ ("a"),"class"); the     //Call the Comm.serattr function to set the class property for an element with ID number B, and a property value of Clasname, both a class property value * comm.setattr ($$ ("b"),"class", clasname); $     //set the Click event for an element with an ID number of bitredPanax Notoginseng     $$("bitred"). onclick=function(){ -         //setting properties for an element the         //the Console.log () method is used to detect if the binding is successful and can be removed + Console.log ("123"); A         //sets the style for the element with ID A, and the arguments in parentheses correspond to the formal parameter E,strname,strvalue the comm.setattr ($$ ("a"),"class","Blue");//property Name, property value +         //defines a variable clasname that holds the class attribute value of an element obtained with ID number a using comm.getattr -         //This variable is clasname as a local variable, unlike the previous $         varClasname=comm.getattr ($$ ("a"),"class"); $         //Call the Comm.serattr function to set the class property for an element with ID number B, and a property value of Clasname, both a class property value - comm.setattr ($$ ("b"),"class", clasname); -     } the </Script> - </Body>Wuyi </HTML>
View Code

The requirement for this example is to set the style for an element with ID A, the element style with ID B follows the style of element A, the button is clicked, the style of element a changes, and the style of element B changes.

Start by defining a global variable clasname, and call the Comm object's GetAttr method to get the property of element A, and use the SetAttr method of the Comm object to set the property for element B, which is required to start the element B property following element a. Then click the event, first call the Srtattr method of the Comm object to set a new property for element A, and define the local variable Clasname store the properties of a with the GetAttr method of the Comm object, and then set the properties stored in the local variable clasname to B.

JavaScript common methods and Functions (SetAttribute and GetAttribute)

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.