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
HTML DOM Style color Property
The HTML DOM Style color property is used for getting or setting the color for the text. The color for the text can be specified in hexadecimal, rgb(), rgba(), hsl(), hsla() or using known keyword.
Following is the syntax for −
Setting the color property −
object.style.color = "color|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| Color | For specifying the color value for the text. |
| Initial | For setting this property to initial value. |
| Inherit | To inherit the parent property value |
Let us look at an example for the color property −
Example
<!DOCTYPE html>
<html>
<body>
<h1>Color property example</h1>
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
<p>This is paragraph 3</p>
<p>This is paragraph 4</p>
<p>This is paragraph 5</p>
<p>Change the above paragraphs color by clicking the below button</p>
<button type="button" onclick="ChangeColor()">Change Text Color</button>
<script>
function ChangeColor() {
for(var i=0;i<5;i++){
if(i%2==0)
document.getElementsByTagName("P")[i].style.color="blue";
else
document.getElementsByTagName("P")[i].style.color="red";
}
}
</script>
</body>
</html>Output
On clicking the “Change Text Color” button −
Updated on: 23-Oct-2019
412 Views
Advertisements