Setting colors in javascript

Style backgroundColor Property

The backgroundColor property sets or returns the background color of an element.

See Also:

Syntax

Return the backgroundColor property:

Set the backgroundColor property:

Property Values

Value	Description
color	Specifies the background color. Look at CSS Color Values for a complete list of possible color values
transparent	Default. The background color is transparent (underlying content will shine through)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	transparent
Return Value:	A String, representing the background color
CSS Version	CSS1

Browser Support

backgroundColor is a CSS1 (1996) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	Yes

More Examples

Example

Set a background color of a specific element:

Example

Return the background color of a specific element:

Example

Return the background color of a document:

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Style color Property

document.getElementById(«myH2»).style.color = «#ff0000»;
document.getElementById(«myP»).style.color = «magenta»;
document.getElementById(«myP2»).style.color = «blue»;
document.getElementById(«myDiv»).style.color = «lightblue»;

Description

The color property sets or returns the color of the text.

Browser Support

Syntax

Return the color property:

Property Values

Value	Description
color	Specifies the color of the text. Look at CSS Color Values for a complete list of possible color values
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Technical Details

Default Value:	not specified
Return Value:	A String, representing the text-color of an element
CSS Version	CSS1

More Examples

Example

Return the text-color of a

element:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to Add Colors to JavaScript Console Outputs (Examples)

To log colored text to the JavaScript console, call the console.log method and include special formatting code %c to colorize the log and pass the colorizing CSS code as the second argument.

For example, to log text in red, you can use the %c formatting code, followed by the desired text and a CSS color property setting the text color to red:

console.log('%cThis text is red!', 'color: red');

This is what it looks like in the JS console:

You can also use the %c formatting code to set other CSS properties, such as the font size or font family:

console.log('%cThis text is red and has a larger font!', 'color: red; font-size: larger');

Remember that this formatting is only supported in modern browsers such as Chrome.

More console.log Color Tricks

Now that you understand how you can use CSS to format your console log function calls, let’s see other cool examples you can implement.

Change the Background of the Logged Message

To change the background color of the text logged to the JavaScript console, you can use the %c formatting code, followed by the desired text and a CSS background-color property setting the background color to the desired value:

console.log('%cThis text has a yellow background!', 'background-color: yellow');

You can also set other CSS properties using the %c formatting code, such as the font size or font family:

console.log('%cThis text has a yellow background and a larger font!', 'background-color: yellow; font-size: larger');

Keep in mind that this formatting is only supported in modern browsers. If you need to support older browsers, you may need to use a different approach.

How to Add Multiple Colors on the Same Line

To add multiple colors to the same line when logging a message to the JavaScript console, you can use multiple instances of the %c formatting code and specify the CSS properties for each segment of text.

For example, the following code will log a message with red text followed by green text:

console.log('%cThis text is red%cThis text is green', 'color: red', 'color: green');

How to Add a Shadow to Console Log

Thus far you’ve seen how to add colors to console logs in JavaScript. But why stop there? You can do a whole bunch of other things with CSS, so let’s play with it a bit more.

For example, let’s create a shadow for the output:

var css = "text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; font-size: 40px;" console.log("%cHello world", css);

Thanks for reading. Happy coding!

Read Also

Источник