css - Best way to change background color with JavaScript HTML DOM -


what appropriate , cross-browser compatible way change background color of element using javascript?

<!doctype html> <html> <head> <title>demo page</title> </head> <body>  <h1 id="head1" style="background-color:red">this heading</h1>  <script>  // one? document.getelementbyid("head1").style["background-color"] = "yellow";   // one? document.getelementbyid("head1").style.backgroundcolor = "yellow";  //or one? document.getelementbyid("head1").style.background = "yellow";  </script>  </body> </html>

get element, use .style attribute along .backgroundcolor attribute change it:

function foo(){    document.getelementbyid("head1").style.backgroundcolor = "yellow";    }
<!doctype html>  <html>  <head>  <title>demo page</title>  </head>  <body>    <h1 id="head1" style="background-color:red">this heading</h1>  <button onclick="foo()">click!</button>    </body>  </html>

thus, 2nd option right one.


-

Comments

Post a Comment