HTML DOM Style outlineColor property
Style Objects Definition and Usage
outlineColor property sets or returns the color of the outline around elements.
grammar
Setting outlineColor properties:
Object.style.outlineColor="color|invert|inherit"
Back outlineColor properties:
Object.style.outlineColor
| 值 | 描述 |
|---|---|
| color | 规定轮廓的颜色。在 CSS 颜色值 中寻找可能的颜色值的完整列表。 |
| invert | 默认。反转轮廓的颜色为相反值。 |
| inherit | 轮廓的颜色从父元素继承。 |
Browser Support
All major browsers support outlineColor property.
Note: IE7 and earlier versions do not support outlineColor property.IE8 only provides! DOCTYPE supported outlineColor property. IE9 support outlineColor property.
Tips and Notes
Contour lines around the surrounding elements. It is displayed in the margin of the surrounding elements. However, it is different from the border property.
Part of the profile is not an element size, and therefore the width and height attributes of the element does not include the width of the profile.
Examples
Examples
Change the color of the outline:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#ex1{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult(){
document.getElementById("ex1").style.outlineColor="#0000FF";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="displayResult()">修改外边框颜色</button>
<p><b>注意:</b> IE8 及以下版本如果要支持 outline 属性，则必须声明 !DOCTYPE。</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
#ex1{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult(){
document.getElementById("ex1").style.outlineColor="#0000FF";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="displayResult()">修改外边框颜色</button>
<p><b>注意:</b> IE8 及以下版本如果要支持 outline 属性，则必须声明 !DOCTYPE。</p>
</body>
</html>
try it"
Style Objects