HTML DOM 스타일의 오버 플로우 속성
스타일 개체 정의 및 사용
오버 플로우 속성 집합 또는 외부 상자의 콘텐츠에 존재하는 요소를 처리하는 방법으로 돌아갑니다.
문법
오버 플로우 속성 설정 :
Object.style.overflow="visible|hidden|scroll|auto|inherit"
위로 오버 플로우 속성 :
Object.style.overflow
| 值 | 描述 |
|---|---|
| visible | 默认。内容不会被修剪，会显示在元素框之外。 |
| hidden | 内容会被修剪，元素框外面的内容不会被显示，浏览器不会显示滚动条。 |
| scroll | 浏览器会显示滚动条，如果需要内容会被修剪。 |
| auto | 内容会被修剪，如果需要则显示滚动条。 |
| inherit | overflow 属性的值从父元素继承。 |
브라우저 지원
모든 주요 브라우저는 오버 플로우 속성을 지원합니다.
참고 : IE7 및 이전 버전은 "상속"값을 지원하지 않습니다.IE8은 "상속"지원!의 DOCTYPE을 제공합니다. IE9 지원 "상속".
팁과주의 사항
팁 : 스크롤 막대를 전체 문서를 숨기려면, 신체 또는 HTML 요소에 오버 플로우 속성을 사용합니다.
예
예
넘치는 내용을 숨길 오버 플로우 속성을 사용합니다 :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
</style>
<script>
function displayResult(){
document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>
<div id="div1">
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
</div>
<br>
<input type="button" onclick="displayResult()" value="隐藏溢出">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>本教程(w3big.com)</title>
<style type="text/css">
div{
border:1px solid red;
width:100px;
height:100px;
}
</style>
<script>
function displayResult(){
document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>
<div id="div1">
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
这是一些文本。这是一些文本。
</div>
<br>
<input type="button" onclick="displayResult()" value="隐藏溢出">
</body>
</html>
»시도
스타일 개체