javaScript dom style object

the dom(document object model) allows javaScript can change the style of html elements.


changing html styles using javascript

the style object of the dom allows you to dynamically change the value of your css properties, whether defined inline or via an external style sheet.

syntax:

         htmlelement.style.property = 'value'

note : the htmlelement.style returns an object that represents the element's style attribute.using it we change the style of html elements.

a standard way to change the style of an html element, use this syntax:

         document.getelementbyid(id).style.property = "value"
<!doctype html>
 
     <html>
     
         <head>  
         
              <style type="text/css">
              
                    #one{color:red;width:600px;height:50px;}
                    
                    #two{color:blue;width:600px;height:60px;}
        
            </style>
            
    <script>
              
     function     h1(){
                          
                             var   one  = document.getelementbyid("one");
                                             
                                    one.style.color = "#ffffff" ;
                                                          
                                    one.style.backgroundcolor= "#3a4b9c";
                           }   
                                           
     function     h2(){
                          
                             var   two  = document.getelementbyid("two");
                                             
                                    two.style.color = "#ffffff";
                                                          
                                    two.style.backgroundcolor= "green";
                           }  
  </script>                        
                                            
         </head>
         
                  <body>
           
       <h1 id="one"> this is the  dom style object.</h1>
             
       <h2 id="two"> this is dynamically change the style of html elements.</h2>
             
  <button onclick="h1();">change the first heading style click here </button>
             
  <button onclick="h2();">change the second heading style click here</button>
             
        </body>      

   </html>

changing html  css  class using javascript

the classname property sets or returns the class attribute of an element.

the classname property is supported in all browsers.

syntax:

          htmlelement.classname = "newclass1   newclass2" ;
<!doctype html>
 
     <html>
     
         <head>  
         
              <style type="text/css">
              
    .f_head{color:white;width:600px;height:150px;background-color:#3a4b9c;}
         
    .border{border:10px inset gold;border-radius:10px;}                    
         
    .s_head{color:blue;width:600px;height:160px;background-color:pink;}
        
            </style>
            
    <script>
              
     function     h1(){
                          
                             var   one  = document.getelementbyid("h");
                                             
                                    one.classname = "f_head  border";
                                                          
                       }               
                                           
     function     h2(){
                          
                             var   two  = document.getelementbyid("hh");
                                             
                                    two.classname = "s_head  border";
                      }  
  </script>                        
                                            
      </head>
         
     <body>
           
       <h1 id="h"> this is the  dom style object.</h1>
             
       <h2 id="hh"> this is dynamically change the style of html elements.</h2>
             
  <button onclick="h1();">change the first heading style click here </button>
             
  <button onclick="h2();">change the second heading style click here</button>
             
    </body>      

</html>