Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to return the color of the text with JavaScript?
In this tutorial, we will learn how to return the color of the text with JavaScript. In the Style (It is a rule of HTML, used to describe how a document will be presented in the browser.) we define the color under that rule of HTML.
To return the color of the text in JavaScript, we have to use the color property of JavaScript. The Colour property is used for assigning the color of the text inside the HTML tags (like p, h1, h2, body, etc.), and with the help of the id of the tag we can return the particular text’s color. Usually, we will get the color in the string form and if the color has a specific name then the color otherwise its RGB combination will be returned.
Syntax
We have discussed the color property of the JavaScript above in the overview, now let’s see the syntax to return the color of the text −
<HTML Tag id="myId" style="color:green;">Text that colour we have to return</HTML Tag>
document.write ( document.getElementById("myId").style.color );
In the above syntax, we have declared a text name ‘Text that color we have to return’ by using the ‘HTML tag’ (like p, body, h1, h2) that contains the id (which will use to represent the paragraph when we want to apply some operation on that text) and the color of the text here is ‘green’ in the ‘color’ property under the rule ‘style’ of HTML.
With the help of property document.write we print the color of the text using the property document.getElementById (which is used to access the thing that contains id) using the “myId” of the text.
Algorithm
We have seen the syntax to return the color of the text with JavaScript, let’s see the complete algorithm step by step to understand it in a better way −
First, we will declare a function by using the ‘function’ keyword and an appropriate name for the function.
After declaring the function, inside we are going to define the body of the function because functions are supposed to perform some work and provide some output.
The function contains two properties document .write and document.getElementById.
With help of a document.getElementById we access the paragraph text using the id of that paragraph and using style.color property able to get the color of that paragraph text.
With help document.write we are able to print that color name to the screen.
First, we create a text using <P> tag which declares the id of it and also declares the color for the text which will be present in the paragraph.
we will create a form using the <form> tag to create a button in it.
In the form, by using the <button> tag we will create a button input, which will call the required function using the onclick event.
We have seen some of the basic steps for how to return the color of the text with JavaScript, now let’s see some examples to get a better understanding of the above-defined steps.
Example
In this example, we will create a function and a form. In the form, we will create the button by pressing that we can call our function and the function will return the color of the text of the paragraph, which will be of string data type here.
<!DOCTYPE html> <html> <head> <script> function display() { document.write(document.getElementById("myId").style.color); } </script> </head> <body> <h2>Return the color of the text with JavaScript</h2> <p id="myId" style="color:green;">This is the text with green colour</p> <br> <form> <button type="button" onclick="display()">Click to get color</button> </form> </body> </html>
In the above code, first, we have created a paragraph with an id and then we have created a form in the body and defined an input method in it which will call the “display” function on click as we have defined the onclick event for it. The “Display” function will return the color of that paragraph with help of paragraph id “myId” and the document.getId and style.color properties.
Conclusion
In this tutorial, we have learned how to return the color of the text with a JavaScript function. For that, we are using color property under the rule (“style”) of the HTML. We create a form that calls a defined function in which we are using the id of that paragraph or any Html element to return the name of the color of the text of the paragraph or HTML element. The return type of the style.color property here is a string.
3K+ Views
