HTML DOM Style outlineStyle property
Style Objects Definition and Usage
outlineStyle property sets or returns the element surrounding the outline style.
grammar
Setting outlineStyle properties:
Object.style.outlineStyle="value"
Back outlineStyle properties:
Object.style.outlineStyle
| 值 | 描述 |
|---|---|
| none | 默认。定义无轮廓。 |
| hidden | 轮廓是关闭的。 |
| dotted | 定义点状轮廓。 |
| dashed | 定义虚线轮廓。 |
| solid | 定义实线轮廓。 |
| double | 定义双线轮廓。 |
| groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 |
| ridge | 定义 3D 垄状轮廓。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 轮廓。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 轮廓。其效果取决于 border-color 的值。 |
| inherit | 轮廓的样式从父元素继承。 |
Browser Support
All major browsers support outlineStyle property.
Note: IE7 and earlier versions do not support outlineStyle property.IE8 only provides! DOCTYPE supported outlineStyle property. IE9 support outlineStyle 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 style 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.outlineStyle="solid";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="displayResult()">修改外边框style</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.outlineStyle="solid";
}
</script>
</head>
<body>
<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="displayResult()">修改外边框style</button>
<p><b>注意:</b> IE8 支持outline属性必须指定一个!DOCTYPE </p>
</body>
</html>
try it"
Style Objects