HTML DOM Style overflow property
Style Objects Definition and Usage
overflow property sets or returns how to deal with the elements present in the outside box content.
grammar
Setting overflow properties:
Object.style.overflow="visible|hidden|scroll|auto|inherit"
Back overflow properties:
Object.style.overflow
| 值 | 描述 |
|---|---|
| visible | 默认。内容不会被修剪，会显示在元素框之外。 |
| hidden | 内容会被修剪，元素框外面的内容不会被显示，浏览器不会显示滚动条。 |
| scroll | 浏览器会显示滚动条，如果需要内容会被修剪。 |
| auto | 内容会被修剪，如果需要则显示滚动条。 |
| inherit | overflow 属性的值从父元素继承。 |
Browser Support
All major browsers support overflow property.
Note: IE7 and earlier versions do not support the "inherit" value.IE8 only provides! DOCTYPE supported "inherit". IE9 support "inherit".
Tips and Notes
Tip: If you want to hide the scroll bar the entire document, use the overflow property on the body or html element.
Examples
Examples
Use the overflow property to hide overflowing content:
<!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>
try it"
Style Objects