How to set background color in javascript
In javascript, you can use the backgroundColor property of the Style object to set the background color. This property is used to set the background color of the element. The syntax format is "element object.style.backgroundColor="color value";".
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
How to set the background color in javascript
In javascript, you can use the backgroundColor property of the Style object to set the background color.
Grammar:
Object.style.backgroundColor="颜色值"
Example:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: #B8BFD8;
}
</style>
<script type="text/javascript">
function changeStyle() {
document.body.style.backgroundColor = "#FFCC80";
// document.body.style.backgroundColor="red";
}
</script>
</head>
<body>
<input type="button" onclick="changeStyle()" value="改变背景颜色" />
</body>
</html>Rendering:
Instructions: How to write color values:
1. Use color names
standard and recommended color names
/*名 称 颜 色 名 称 颜 色 名 称 颜 色 black 纯黑 silver 浅灰 navy 深蓝 blue 浅蓝 green 深绿 lime 浅绿 teal 靛青 aqua 天蓝 maroon 深红 red 大红 purple 深紫 fuchsia 品红 olive 褐黄 yellow 明黄 gray 深灰 white 壳白*/
It is not recommended to use color names in web pages, especially large-scale use, to avoid some color names not being parsed by browsers, or different browsers interpreting colors differently.
2. Hexadecimal color
Hexadecimal symbols #RRGGBB and #RGB (such as #ff0000). "#" followed by 6 or 3 hexadecimal characters (0-9, A-F).
This is the most commonly used color selection method, for example:
#f03 #F03 #ff0033 #FF0033
3, RGB, red-green-blue (RGB)
The color value is specified as the color of the rgb code. The function format is rgb(R,G,B), and the value can be an integer or percentage from 0-255.
rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%)
Extensions: RGBA, Red-Green-Blue-Alpha (RGBa)
RGBA extends the RGB color mode to include an alpha channel, allowing the transparency of a color to be set. a represents transparency: 0=transparent; 1=opaque.
rgba(255,0,0,0.1) /* 10% 不透明 */ rgba(255,0,0,0.4) /* 40% 不透明 */ rgba(255,0,0,0.7) /* 70% 不透明 */ rgba(255,0,0, 1) /* 不透明，即红色 */
4. HSL, hue-saturation-lightness (Hue-saturation-lightness)
Hue (Hue) represents the color circle (that is, a circle representing a rainbow) ring) at an angle.
Saturation and brightness are expressed as percentages.
100% is full saturation, while 0% is a grayscale.
100% lightness is white, 0% lightness is black, and 50% lightness is "normal".
hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
Extension: HSLA, Hue-Saturation-Lightness-Alpha (HSLa)
HSLa extends from the HSL color mode and includes the alpha channel, which can specify the transparency of a color. a represents transparency: 0=transparent; 1=opaque.
hsla(240,100%,50%,0.05) /* 5% 不透明 */ hsla(240,100%,50%, 0.4) /* 40% 不透明 */ hsla(240,100%,50%, 0.7) /* 70% 不透明 */ hsla(240,100%,50%, 1) /* 完全不透明 */
5, transparent
Special color value, indicating transparent color. Can be used directly as color.
[Recommended learning: javascript advanced tutorial]
The above is the detailed content of How to set background color in javascript. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1378
52
How to adjust background color settings in Eclipse
Jan 28, 2024 am 09:08 AM
How to set background color in Eclipse? Eclipse is a popular integrated development environment (IDE) among developers and can be used for development in a variety of programming languages. It is very powerful and flexible, and you can customize the appearance of the interface and editor through settings. This article will introduce how to set the background color in Eclipse and provide specific code examples. 1. Change the editor background color. Open Eclipse and enter the "Windows" menu. Select "Preferences". Navigate on the left
How to set the background color in editplus-How to set the background color in editplus
Mar 04, 2024 pm 07:00 PM
Friends, do you know how to set the background color in editplus? Today I will explain how to set the background color in editplus. If you are interested, come and take a look with me. I hope it can help you. Step 1: First open editplus, click Tools above, as shown in the picture: Step 2: In the tool menu, click preferences, as shown in the picture: Step 3: In the preferences page, click colors on the left, as shown in the picture: Chapter 3 Step 4: In the background position, select a color as needed, as shown in the figure:
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
Step-by-step guide to changing background color with Eclipse
Jan 28, 2024 am 08:28 AM
Teach you step by step how to change the background color in Eclipse, specific code examples are required Eclipse is a very popular integrated development environment (IDE) that is often used to write and debug Java projects. By default, the background color of Eclipse is white, but some users may wish to change the background color to suit their preference or to reduce eye strain. This article will teach you step by step how to change the background color in Eclipse and provide specific code examples. Step 1: Open Eclipse First
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
Detailed explanation of how to modify the background color of PyCharm
Jan 04, 2024 am 11:03 AM
PyCharm is a powerful Python integrated development environment (IDE) that provides developers with many convenient functions and tools. One of the commonly used functions is to modify the background color of PyCharm. In this article, I will introduce in detail the method of modifying the background color of PyCharm and provide specific code examples. To modify the background color of PyCharm, we need to perform the following steps: Step 1: Open PyCharm and click "Settin" under the "File" menu
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
