Change Background Color Using JavaScript Function
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of change background color using JavaScript function, the main theme of your website is described by the colour of your website's background.
Depending on the backdrop colour, you can select multiple colour palettes for buttons, inputs, and other objects. The colour displayed in the backdrop of an element can be changed by changing different property.
Let's check how to change background color in JavaScript.
Step By Step Guide On Change Background Color Using JavaScript Function :-
The backgroundColor property in JavaScript can be used to change the background colour. To utilise this property, first get the element whose background colour you wish to change, and then set the background colour with the backgroundColor property.
For example, let's use HTML to create a page and use the backgroundColor attribute to change the body's background colour to green. Take a look at the code below and change background color using JavaScript function.
<! DOCTYPE html>
<html>
<head>
<title>Welcome to our page and let's get started!</title>
</head>
<body>
<button onClick="Mycolor()">Change Color</button>
<div id="myID">Welcome</div>
<script type='text/javascript'>
function Mycolor() {
var element = document.getElementById("myID");
element.style.backgroundColor='#800';
}
</script>
</body>
</html>
- To begin, type <! DOCTYPE html> to indicate that the file is in HTML format to the web browser.
- The <html> element, on the other hand, is used to indicate that HTML content is about to begin.
- The information about web pages is now contained in the <head> tag. This tag uses the <title> element to provide a web page title. The <head> and <title> tags, for example, are paired tags. As a result, both have the closing tags </head> and </title>.
- Finally, the <body> element specifies the content of the web page. This is where all of the website's material will be written. Our javascript code was inserted using the script tag within the body element.
- You may also access the element by using the class's id or name. The getElementById() function can be used to get an element by its id. The getElementsByClassName() function can be used to get an element by its class name.
- The code above just affects the element with the id myID's background colour, not the entire body section. You can also use the colour code of different colours instead of the colour name to modify the background colour of an element.
- You'll see a button and some text in this code. When you push the button, the text's background colour changes to the specified colour.
- The </body> and </html> tags, respectively, close the <body> and <html> tags.
Conclusion :-
You can see an example of JavaScript code in the example above. JavaScript, as a result, has its own set of functions. We can use this to change the colour of our page or block's backdrop.
We've gone through all of the code with you step by step, including an example of using script and altering the background.
In this way, you can Change background color using the JavaScript function. I hope this tutorial on change background color using JavaScript function helps you.
About Dikshita
