Properti HTML DOM Style outlineStyle
Definisi dan Penggunaan
set properti outlineStyle atau mengembalikan elemen sekitarnya gaya garis.
tatabahasa
Pengaturan properti outlineStyle:
Object.style.outlineStyle="value"
Sifat Kembali outlineStyle:
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 | 轮廓的样式从父元素继承。 |
Dukungan Browser
Semua browser utama mendukung properti outlineStyle.
Catatan: IE7 dan versi sebelumnya tidak mendukung properti outlineStyle.IE8 hanya menyediakan! DOCTYPE didukung properti outlineStyle. IE9 mendukung properti outlineStyle.
Tips dan Catatan
garis kontur di sekitar elemen sekitarnya. Hal ini ditampilkan dalam margin elemen sekitarnya. Namun, berbeda dengan properti perbatasan.
Bagian dari profil bukanlah ukuran elemen, dan karena itu lebar dan tinggi atribut dari elemen tidak termasuk lebar profil.
contoh
contoh
Mengubah gaya garis besar:
<!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>
Coba »
gaya Objects