HTML DOM Style outlineWidth property
Style Objects Definition and Usage
outlineWidth property sets or returns the width of the elements around the profile.
grammar
Setting outlineWidth properties:
Object.style.outlineWidth="thin|medium|thick|length|inherit"
Back outlineWidth properties:
Object.style.outlineWidth
| 值 | 描述 |
|---|---|
| thin | 定义细的轮廓。 |
| medium | 默认。定义中等的轮廓。 |
| thick | 定义粗的轮廓。 |
| length | 使用 px、cm 等单位定义轮廓的宽度。 |
| inherit | 轮廓的宽度从父元素继承。 |
Browser Support
All major browsers support outlineWidth property.
Note: IE7 and earlier versions do not support outlineWidth property.IE8 only provides! DOCTYPE supported outlineWidth property. IE9 support outlineWidth 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 width of the outline:
<html>
<head>
<style type="text/css">
#ex1
{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.outlineWidth="10px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change outline width</button>
</body>
</html>
<head>
<style type="text/css">
#ex1
{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.outlineWidth="10px";
}
</script>
</head>
<body>
<div id="ex1">This is some text.</div>
<br>
<button type="button" onclick="displayResult()">Change outline width</button>
</body>
</html>
try it"
Style Objects