Javascript Reference - HTML DOM Style outlineColor Property

The outlineColor property sets or gets the color of the outline.

Browser Support


`outlineColor`	Yes	9.0	Yes	Yes	Yes

Syntax

Return the outlineColor property:

var v = object.style.outlineColor

Set the outlineColor property:

object.style.outlineColor='color|invert|initial|inherit'

Property Values

Value	Description
color	Set the outline color.
invert	Default. Invert the outline color to the opposite value.
initial	Set to default value.
inherit	Inherit from parent element.

Technical Details

Default Value:	invert
Return Value:	A string representing the outline color
CSS Version	CSS2

Example

The following code shows how to change the outline color.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!--from  w w  w .ja v  a2  s  .  c om-->
    border: 1px solid red;
    outline-style: dotted;
}
</style>
</head>
<body>
<div id="myDiv">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    document.getElementById("myDiv").style.outlineColor = "#00ff00";
}
</script>
</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the outline color.


<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {<!-- w w  w. ja  v  a  2  s . com-->
    border: 1px solid red;
    outline-style: dotted;
}
</style>
</head>
<body>
<div id="myDiv" style="outline-color:blue;">This is a div element.</div>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.outlineColor);
}
</script>
</body>
</html>

The code above is rendered as follows: