Как изменить цвет фона веб-страницы с помощью JavaScript

Свойство style используется для получения, а также для установки встроенного стиля элемента, например:

     // Функция изменения цвета фона веб-страницы function changeBodyBg(color) < document.body.style.background = color; >// Функция изменения цвета фона заголовка function changeHeadingBg(color) 
This is a heading
 
This is a paragraph of text.
 
 
Change Webpage Background To: Yellow Lime Orange 
 
 
Change Heading Background To: Red Green Blue 
  

Читайте также

Похожие примеры:

Источник

JavaScript: change a webpage background color

When you want to change a webpage background color using JavaScript, you need to manipulate the document object model (DOM) property by calling it inside your tag.

The property you need to manipulate for changing the background color of the whole page is document.body.style.background :

You can test the code out by changing the color of Google’s homepage. First, open your browser’s developer console. Then in the Console tab next to Elements, write the following code:

The color of Google’s homepage will change to Orange, just like in the screenshot below:

Back when I first learned how to code, I used to do this to impress my non-coder friends. But inside your project, you probably want to trigger the color change when the visitors do something. For example, you can change the background color when a is clicked:

If you want to wait until the page and the resources are fully loaded, you can listen for the load event instead.

Changing background color of a specific element

The document.body code means you are selecting the tag of your HTML page. You can also change only a part of your page by selecting only that specific element.

• getElementById() — get a single element with matching id attribute
• getElementsByClassName() — get elements with matching class attribute
• getElementsByName() — get elements with matching name attribute
• getElementsByTagName() — get elements with matching tag name like «li» for
• , «body» for

But the most recommended approach is to use getElementById() because it’s the most specific of these methods. Out of the four methods, only getElementById() will retrieve a single element.

The following example shows how you can change the background of element with id=»user» attribute:

 And that’s how you change the background color of a webpage with JavaScript.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

Как изменить цвет фона веб-страницы с помощью JavaScript

Свойство style используется для получения, а также для установки встроенного стиля элемента, например:

     // Функция изменения цвета фона веб-страницы function changeBodyBg(color) < document.body.style.background = color; >// Функция изменения цвета фона заголовка function changeHeadingBg(color) 
This is a heading
 
This is a paragraph of text.
 
 
Change Webpage Background To: Yellow Lime Orange 
 
 
Change Heading Background To: Red Green Blue 
  

Читайте также

Похожие примеры:

Источник

Change the Background Color in JavaScript

This tutorial will discuss how to change the background color using the backgroundColor property in JavaScript.

Change the Background Color Using the backgroundColor Property in JavaScript

We can change the background color using the backgroundColor property in JavaScript. To use this property, you need to get the element whose background color you want to change, and then you can use the backgroundColor property to set the background color.

For example, let’s create a page using HTML and change the background color of the body to green using the backgroundColor property. See the code below.

 html> head>  title>title>  head> body>  script type="text/javascript">  document.body.style.backgroundColor = 'green';  script>  body>  html> 

You can also get the element with the id or name of the class. To get an element using its id, you can use the getElementById() function. To get an element using its class, you can use the getElementsByClassName() function.

For example, let’s get an element by its id and change its background color using the backgroundColor property. See the code below.

 html> head>  title>title>  head> body>  p id='myID'>  Hello Wold  p>  script type="text/javascript">  document.getElementById('myID').style.backgroundColor = 'green';  script>  body>  html> 

The code above will only change the background color of the element with id myID and not the whole body section. You also change the background color of an element using the color code of different colors instead of changing it using the color name.

Let’s write a code to change the background color of a text using a button. See the code below.

 html> head>  title>title>  head> body> button onClick="Mycolor()">Change Colorbutton> div id="myID">Hello Worlddiv> script type='text/javascript'> function Mycolor()  var element = document.getElementById("myID"); element.style.backgroundColor='#900'; >  script>  body>  html> 

In this code, you will see a button and a text. When you press the button, the background color of the text will change according to the given color.

Hello! I am Ammar Ali, a programmer here to learn from experience, people, and docs, and create interesting and useful programming content. I mostly create content about Python, Matlab, and Microcontrollers like Arduino and PIC.

Related Article — JavaScript Color

Источник