HTML DOM 스타일 outlineStyle 속성
스타일 개체 정의 및 사용
outlineStyle 속성 집합 또는 개요 스타일을 둘러싼 요소를 반환합니다.
문법
outlineStyle 속성 설정 :
Object.style.outlineStyle="value"
위로 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 | 轮廓的样式从父元素继承。 |
브라우저 지원
모든 주요 브라우저는 outlineStyle 속성을 지원합니다.
참고 : IE7 및 이전 버전 outlineStyle 속성을 지원하지 않습니다.IE8은!의 DOCTYPE가 outlineStyle 속성을 지원합니다. IE9는 outlineStyle 속성을 지원합니다.
팁과주의 사항
주변 요소 주변의 등고선. 그것은 주변 요소의 여백에 표시됩니다. 그러나, 테두리 속성 다르다.
프로파일의 일부 요소의 크기없고, 따라서, 폭과 높이의 프로파일의 폭을 포함하지 않는 요소의 속성.
예
예
윤곽의 스타일을 변경합니다 :
<!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>
»시도
스타일 개체