The DOM style color property is used to set or return the color of the text.
Syntax:
- It is used to set the color property.
object.style.color
- It is used to return the color property.
object.style.color = "color|initial|inherit"
Return Values: It returns a string value that represents a text-color of an element.
Example: In this example, we will use DOM style color property
html
<!DOCTYPE html>
< html >
< head >
< title >DOM Style color Property</ title >
</ head >
< body style = "text-align:center" >
< h1 id = "geeks1" >GeeksforGeeks</ h1 >
< h2 id = "geeks2" >DOM Style color Property</ h2 >
< p id = "geeks3" >
GeeksforGeeks: A computer science portal
</ p >
< button type = "button" onclick = "geeks()" >
Submit
</ button >
< script >
function geeks() {
document.getElementById("geeks1").style.color
= "green";
document.getElementById("geeks2").style.color
= "black";
document.getElementById("geeks3").style.color
= "blue";
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we will use the DOM style color property
HTML
<!DOCTYPE html>
< html >
< head >
< title >DOM Style color Property</ title >
</ head >
< body style = "text-align:center" >
< h1 style = "color:green;" id = "gfg" >
GeeksforGeeks
</ h1 >
< h2 >DOM Style color Property</ h2 >
< button type = "button" onclick = "geeks()" >
Submit
</ button >
< script >
function geeks() {
alert(document.getElementById("gfg").style.color);
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by DOM Style color property are listed below:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 3 and above
- Firefox 1 and above
- Opera 3.5 and above
- Apple Safari 1 and above