DOM set css styles

<! DOCTYPE HTML > 
< HTML > 
< head lang = "EN" > 
    < Meta charset = "UTF-. 8" > 
    < title > the DOM disposed style css </ title > 
    <-!  
        P.style.fontSize = 100px; 
        Interpretation : 
        setting the font size of the element p style = 100px; 
        style attribute is not the "-" symbol to write hump form 

        Remember, in addition to the acquired element getElementById other go through the array x [i] is an index of its styling , whether acquired a few 
     -> 
</ head > 
< body > 
    < H3 ID = "H" >Front-end books </H3 > 
    < UL ID = "listWeb" > 
        < Li > HTML based </ Li > 
        < Li > the CSS based </ Li > 
        < Li > the JavaScript based </ Li > 
        < Li > Jquery frame </ Li > 
        < Li > on Bootstrap framework </ li > 
    </ ul > 
    < h3 > JAVA books </ h3 > 
    <ul id= "listJava" > 
        < Li > the JAVA language based </ Li > 
        < Li > three frame </ Li > 
        < Li > the JAVA layman </ Li > 
    </ UL > 
< Script > 
    var X = document.getElementById ( " H " ); // variable x to obtain id = h H3 
    x.style.color = " Blue " ; // ID is the only method of obtaining, without using the array index 
    var Y =document.getElementsByTagName ( " h3 " ); // Use the element h3 obtain variable y 
    y [ . 1 ] .style.color = " Red " ; // array index and the second h3 styling 
    var A = document.getElementById ( " listWeb " ) .getElementsByTagName ( " Li " ); // used to get all the variables a distal books 
    for ( var I = 0 ; I <= a.length; I ++ ) { // use distal loop through all books 
        a [i] .style.fontStyle = "Italic " ; // all books disposed distal italics 
        IF (I == 2 ) { 
            A [I] .style.color = " Green " ; // the second color is green font set 
            a [i] .style. ListStyle = " none " ; // the front of the second black dot deleted 
        } the else { 
            a [I] .style.backgroundColor = " gray " ; // the other set the background color to gray 
        } 
    } 
</ Script > 
< / body > 
</html>

Guess you like

Origin www.cnblogs.com/vinson-blog/p/12040682.html