How To Change The Background Color Of A Web Page Using ...

Home » Colors Html5 Change » How To Change The Background Color Of A Web Page Using ...

Maybe your like

TutorialRepublic HOME HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP5 v4.6 PHP7 SQL REFERENCES EXAMPLES FAQ SNIPPETS Online HTML Editor WEB TUTORIALS HTML Tutorial CSS Tutorial JavaScript Tutorial jQuery Tutorial Bootstrap Tutorial PHP Tutorial SQL Tutorial PRACTICE EXAMPLES HTML Examples CSS Examples JavaScript Examples jQuery Examples Bootstrap Examples PHP Examples HTML REFERENCES HTML Tags/Elements HTML Global Attributes HTML Event Attributes HTML Color Picker HTML Language Codes HTML Character Entities HTTP Status Codes CSS REFERENCES CSS At-rules CSS Properties CSS Animatable Properties CSS Color Values CSS Color Names CSS Web Safe Fonts CSS Aural Properties PHP REFERENCES PHP Array Functions PHP String Functions PHP File System Functions PHP Date/Time Functions PHP Calendar Functions PHP MySQLi Functions PHP Filters PHP Error Levels Advertisements How to change the background color of a web page dynamically using JavaScript

Topic: JavaScript / jQueryPrev|Next

Answer: Use the JavaScript style property

You can easily change the background color of a webpage i.e. the <body> element or any other element dynamically by using its style property in JavaScript.

The style property is used to get as well as set the inline style of an element. Typically, any HTML element that supports the style attribute also has a style property. Here's an example:

Example

Try this code » <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Change the Background Color with JavaScript</title> <script> // Function to change webpage background color function changeBodyBg(color){ document.body.style.background = color; } // Function to change heading background color function changeHeadingBg(color){ document.getElementById("heading").style.background = color; } </script> </head> <body> <h1 id="heading">This is a heading</h1> <p>This is a paragraph of text.</p> <hr> <div> <label>Change Webpage Background To:</label> <button type="button" onclick="changeBodyBg('yellow');">Yellow</button> <button type="button" onclick="changeBodyBg('lime');">Lime</button> <button type="button" onclick="changeBodyBg('orange');">Orange</button> </div> <br> <div> <label>Change Heading Background To:</label> <button type="button" onclick="changeHeadingBg('red');">Red</button> <button type="button" onclick="changeHeadingBg('green');">Green</button> <button type="button" onclick="changeHeadingBg('blue');">Blue</button> </div> </body> </html>

Related FAQ

Here are some more FAQ related to this topic:

  • How to get element by class name in JavaScript
  • How to add CSS properties to an element dynamically using jQuery
  • How to add attribute to an HTML element in jQuery
Previous Page Next Page Advertisements Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties Advertisements

Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for the latest updates.

About Us

Our Story Terms of Use Privacy Policy

Contact

Contact Us Report Error Advertise

Interactive Tools

Bootstrap Icon Search Utility HTML Formatter Title & Meta Length Calculator HTML Color Picker Bootstrap Button Generator SQL Playground Font Awesome Icon Finder HTML Editor

TutorialRepublic

BMC Copyright © 2025 Tutorial Republic. All Rights Reserved. Share This:

Tag » Colors Html5 Change