1: Modify attributes
Grammar: ele. Style. SyleName = styleValue
Function: Set the CSS style of the ele element
2. Obtain the attributes of the object
console.log(btn1[0].style.height); //40px
3. Js gets non-inline style attributes
console.log(window.getComputedStyle(btn1[0]).width);
The < body > < button id = "BTN" > me < / button > < script > btn1 = d ocument. GetElementsByTagName (" button "); /* modify attributes -----js operation attributes are inline styles (set or get)*/ btn1[0].style.background="pink"; btn1[0].style.height="40px"; Console. log(btn1[0].style.height); //40px //js gets the non-line style attribute console.log(window.getComputedStyle(btn1[0]).width); < /script> < /body>
innerHTML
Grammar: ele. InnerHTML
Function: Return the HTML between the start and end tags of the ele element.
Syntax: ele.innerhtml =” HTML”
Set the HTML content between the start and end tags of the ele element to HTML.
Note:
Font -size cannot be a hyphen
Use the hump naming form: fontSize
className
Grammar: ele. ClassName
Function: Returns the class attribute of the ele element
Note:
1. ClassName resets the class, replacing the element’s own class
2. If an element has more than two class values, then fetching the element’s className property prints all of its class values
< body >< div class="box" id="box"> element < /div> < ul ID ="list"> < li>Java development < li>UI Designer < /li> < /ul> < script> //innerHTML Gets the tag's content var lis=document.getElementById("list").getElementsByTagName("li") ; // Array console.log(lis); for( i=0,len=lis.length; i < len; i++){ console.log(lis[i].innerHTML); Lis [I].innerhtml =lis[I].innerhtml +' program '; //className returns the class attribute lis[1]. ClassName ="current"; Class} console.log(document.getelementById ("box").className); < /script> < /body >
DOM property setting and obtaining
Retrieve attributes
Syntax: el.getAttribute (” attribute “)
Function: Obtain the attribute attribute of the ele element
Description:
1. Ele is the DOM object to manipulate
2. Attribute is the HTML attribute to obtain (for example, ID, type).
Set properties
Grammar: ele. SetAttribute (” attribute “, value)
Function: Sets attributes on the ele element
Description:
1. Ele is the DOM object to manipulate
Attribute indicates the name of the attribute to be set
3. Value is the value of the attribute attribute
Delete the properties
Syntax: el.removeattribute (” attribute”)
Run the following command to delete attribute attribute on ele
Description:
1. Ele is the DOM object to manipulate
2. Attribute is the name of the attribute to be deleted
< body> < p id=" text2" align="center" data-type="title" > < /p> < input type="text" name="user" id="user" Value ="user" vaildata="user2"> < script> getAttribute var p= document.getelementById ("text"); // Get the contents of the p tag console.log(p.id); // text console.log(p.align); // center console.log(p.className ); // Text2 // Get the class using className console.log(p.gettattribute ("data-type")); // title console.log(p.getAttribute("class") ); // text2 var input=document.getElementById("user") ; console.log(input.id); // user console.log(input.getAttribute ("vaildata")); // user2 // set the attribute setAttribute // set a data-color attribute for p. SetAttribute ("irland","false"); // remove the align attribute p.removeattribute ("align"); // Remove the name attribute input.removeAttribute("name"); < /script> < /body>