Javascript DOM CSS Style outlineColor Property

Introduction

Change the color of the outline of a <div> element: 

document.getElementById("myDiv").style.outlineColor = "#00ff00";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {//  ww  w  .jav a2s. co  m
  border: 1px solid red;
  outline-style: dotted;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>
<br>
<button type="button" onclick="myFunction()">Change outline color</button>

<script>
function myFunction() {
  document.getElementById("myDiv").style.outlineColor = "#00ff00";
}
</script>

</body>
</html>

The outlineColor property sets or gets the color of the outline around an element.

An outline is a line around an element.

It is displayed around the margin of the element.

The outline is not a part of the element's dimensions.

The element's width and height properties do not contain the width of the outline.

Property Values

Value Description
color Sets the color of the outline.
invert Inverts the color of the outline to the opposite value. default
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The outlineColor property returns a String representing the color of an element's outline.




PreviousNext

Related