Style outlineStyle 屬性

Style 對象

定義和用法

outlineStyle 屬性設(shè)置或返回元素周圍的輪廓的樣式。

語法

設(shè)置 outlineStyle 屬性：

Object.style.outlineStyle="value"

返回 outlineStyle 屬性：

Object.style.outlineStyle

值	描述
none	默認(rèn)。定義無輪廓。
hidden	輪廓是關(guān)閉的。
dotted	定義點狀輪廓。
dashed	定義虛線輪廓。
solid	定義實線輪廓。
double	定義雙線輪廓。
groove	定義 3D 凹槽輪廓。此效果取決于 outline-color 值。
ridge	定義 3D 壟狀輪廓。其效果取決于 border-color 的值。
inset	定義 3D inset 輪廓。其效果取決于 border-color 的值。
outset	定義 3D outset 輪廓。其效果取決于 border-color 的值。
inherit	輪廓的樣式從父元素繼承。

瀏覽器支持

所有主要瀏覽器都支持 outlineStyle 屬性。

注意：IE7 及更早的版本不支持 outlineStyle 屬性。IE8 只有規(guī)定了 !DOCTYPE 才支持 outlineStyle 屬性。IE9 支持 outlineStyle 屬性。

提示和注釋

輪廓是圍繞元素周圍的線條。它是顯示在元素的 margin 的周圍。但是，它與 border 屬性不同。

輪廓不是元素尺寸的一部分，因此元素的 width 和 height 屬性不包含輪廓的寬度。

實例

更改輪廓的樣式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小白教程(json.cn)</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>

運行代碼 ?

Style 對象其他擴展

上一篇：Style outlineOffset 屬性下一篇：Style outlineWidth 屬性