Text colors in javascript

element and a button that will call the JavaScript “changeColor()” method when its onclick event will be triggered:

In the definition of the “changeColor()” method, we will invoke the “querySelector()” method by passing class name with dot(.) that indicates the element is accessed based on its class name, and then apply color property on it:

document. querySelector ( «.color» ) . style . color = «Magenta» ;

However, to use an id in an HTML element and access it using querySelector() method, add the “#” sign with id name:

We have gathered the simplest approach to change the text color in JavaScript.

Conclusion

For changing text color, you can use the style.color property with the help of getElementById() method or querySelector() method. The getElementById() method is used to access the HTML element based on its assigned id, while the querySelector() method accesses the element based on the assigned id or the class by specifying (#) or (.) signs, respectively. This study illustrated the simple procedure for changing the text color in JavaScript.

About the author

Farah Batool

I completed my master’s degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.

Источник

How to change the Text Color in JavaScript

JavaScript is a powerful language, allowing you to do so many things programmatically.

One of the common uses of JavaScript is to change the color of an element after it is loaded.

In this post, we will learn how you can use JavaScript to change the color of an HTML element.

Change the color of an element

To start off, let’s use this example DOM:

The text we want to change is the paragraph element that says «Hello World!».

To start, we will need to first query for the element.

We can use JavaScript’s document.querySelector() function to do this, and pass in the CSS selector for the element we want to change.

Now that we got the element, we can proceed to change the color of the text.

To change the color of the text, we’ll be setting its style.color property. This is a built-in property for HTML elements that represents the color of the text.

All we need to do is change this property to the color that we want, and the browser will take care of the rest.

Here’s how to change the color to red :

It also supports hexadecimal colors, like #ff0000 .

Conclusion

In this post, we learned how to change the color of an HTML element using JavaScript.

By manipulating the style.color property, we can both read and update the color of the element.

Hopefully, this has been useful for you. Thanks for reading!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

Give feedback on this page , tweet at us, or join our Discord !

Источник

How to change the font color of a text using JavaScript?

This tutorial teaches us to change the font color of the text using JavaScript. While working with JavaScript and developing the frontend of the application, it needs to change the font color of the text using JavaScript when an event occurs.

For example, we have an application which can turn on or off the device. We have a button to turn on or off the device. When the device is on, make the button text green. Otherwise, make the button text red.

So, in such cases, programmers need to change the font color using JavaScript. We have some different method to overcome the problem at below.

Access the Element and Change the Style

In this section, we will access the element by id or class name using JavaScript. Users can change the style of the element using the .style property. Also, we can change the specific style, such as element color, background color, size, etc.

In our case, we will change the color attribute values to change the font color. Users can follow the below syntax to change the font color using JavaScript.

Syntax

let element = document.getElementById(' element_id '); element.style.color = colorCode;

Parameters

• colorName − It is the new color, which users want to apply to the text. It can be color name, color’s hexadecimal code, or RGB values.

Example

In the below example, we have created a button. When the user clicks on that button, we will call a function named changeFontColor(). Inside the function, we are accessing the button element using its id and changing the color using the color attribute of its style

html> head> style> button  height: 30px; width: 100px; > /style> /head> body> h2> Change the font color using JavaScript./h2> div id = "fonts"> Click the button to change the color of font inside the button./div> button onclick = "changeFontColor()" id = "btn" >change color/button> script> // function to change the font color of button function changeFontColor()  let button = document.getElementById("btn"); // access the button by id let color = button.style.color; if (color == "red")  // if button color is red change it green otherwise change it to red. button.style.color = 'green'; > else  button.style.color = 'red'; > > /script> /body> /html> 
 

When users will click on the ‘change color’ button, it will toggle the button color between green and red.

Change the color of all text

In this section, we will learn to change the color of all body text. You can consider the scenario. When we apply the dark or light theme to the application, it is not good practice to change the color of every element one by one. Rather, we can change the color of all body text with just a single click.

Users can follow the syntax below to change the body text’s font color.

Syntax

document.body.style.color = color

Example

In the below example, we will change the color of the all body text, instead of changing the text of the particular element.

html> head> style> button  height: 30px; width: 100px; > body  color: blue; > /style> /head> body> h2> Change the font color using JavaScript./h2> div id = "fonts"> Click the button to change the color of font of the whole body/div> button onclick = "changeFontColor()" id = "btn">change color/button> script> // function to change the font color of button function changeFontColor()  // toggle the body text color on button click. let color = document.body.style.color; if (color == "blue")  document.body.style.color = 'pink'; > else  document.body.style.color = 'blue'; > > /script> /body> /html> 
 

When user clicks on the button, it will change the color of all text between pink and blue.

Use the String fontcolor() Method

In this section, we will learn about the fontcolor() method. We can apply the fontcolor() method on any text string, and it returns the HTML element with the color attribute.

Users can follow the below syntax to use the fontcolor() method.

Syntax

let text = "some text"; text.fontcolor("color");

Parameters

Return values

Example

In the below example, we will change the color of a particular string using String fontcolor() method.

html> head> style> button  height: 30px; width: 100px; > /style> /head> body> h2> Change the font color using JavaScript./h2> div> Click the button to change the color of below text using i> fontcolor() /i> method./div> div id="fonts"> hello world!/div> button onclick = "changeFontColor()" id = "btn">change color/button> script> // function to change the font color of button function changeFontColor()  let fontsDiv = document.getElementById("fonts"); let string = "hello world"; fontsDiv.innerHTML = string.fontcolor("green"); > /script> /body> /html> 
 

In the output, users can observe that when they clicks the button, font of the “hello world” changes to the green.

In this tutorial, we have learned to change the all text of the body with a single click. Also, we learned to change the color of the text of a single element using the style attribute of the element. In the last section, we have learned about the fontcolor() method which is deprecated so it is not recommended to use.

Источник