HTML DOM中的Style outlineStyle屬性用於設置或返回元素周圍輪廓的樣式。句法:
- 它用於返回outlineStyle屬性。
object.style.outlineStyle
- 它用於設置outlineStyle屬性。
object.style.outlineStyle = value
:
屬性值:
- none:這是不設置輪廓的默認值。
- hidden:使用此值,輪廓將關閉。
- dotted:此值設置虛線輪廓。
- dashed:此值設置虛線輪廓。
- solid;此值設置了堅實的輪廓。
- double;此值設置雙重輪廓。
- groove;該值設置3D溝槽輪廓。
- ridge;此值設置3D脊形輪廓。
- inset;此值設置3D插入輪廓。
- outset;此值設置3D起始輪廓。
- initial;此值將outline屬性設置為其瀏覽器的默認值。
- inherit:此值將outline屬性設置為其父元素的值。
返回值:此方法返回一個String值,表示元素輪廓的樣式。
範例1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style outlineStyle Property
</title>
<style>
#myDiv {
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<h1> Geeks for Geeks</h1>
<h2>HTML | DOM Style outlineStyle Property</h2>
<div id="myDiv">Welcome to Geeks for Geeks.</div>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
document.getElementById("myDiv")
.style.outlineStyle = "solid";
}
</script>
</body>
</html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
範例2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style outlineStyle Property
</title>
<style>
#myDiv {
border:1px solid red;
}
</style>
</head>
<body>
<h1> HTML | DOM Style outlineStyle Property</h1>
<div id="myDiv">Welcome to Geeks for Geeks.</div>
<br>
<button type="button" onclick="myFunction()">
Click Here!
</button>
<script>
function myFunction() {
document.getElementById("myDiv")
.style.outlineStyle = "dotted";
}
</script>
</body>
</html>
輸出:
- 在單擊按鈕之前:
- 單擊按鈕後:
支持的瀏覽器:下麵列出了DOM Style outlineStyle屬性支持的瀏覽器:
- 穀歌瀏覽器
- IE瀏覽器
- Firefox
- Opera
- Safari
相關用法
- HTML Style top用法及代碼示例
- HTML Style right用法及代碼示例
- HTML Style animationTimingFunction用法及代碼示例
- HTML Style textDecorationColor用法及代碼示例
- HTML Style fontStyle用法及代碼示例
- HTML Style animationFillMode用法及代碼示例
- HTML Style lineHeight用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style paddingRight用法及代碼示例
- HTML Style paddingLeft用法及代碼示例
- HTML Style paddingBottom用法及代碼示例
- HTML Style paddingTop用法及代碼示例
- HTML Style pageBreakBefore用法及代碼示例
- HTML Style width用法及代碼示例
注:本文由純淨天空篩選整理自divyatagoel0709大神的英文原創作品 HTML | DOM Style outlineStyle Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。