Style overflow 屬性
Style 對(duì)象
定義和用法
overflow 屬性設(shè)置或返回如何處理呈現(xiàn)在元素框外面的內(nèi)容。
語法
設(shè)置 overflow 屬性：
Object.style.overflow="visible|hidden|scroll|auto|inherit"
返回 overflow 屬性：
Object.style.overflow
| 值 | 描述 |
|---|---|
| visible | 默認(rèn)。內(nèi)容不會(huì)被修剪，會(huì)顯示在元素框之外。 |
| hidden | 內(nèi)容會(huì)被修剪，元素框外面的內(nèi)容不會(huì)被顯示，瀏覽器不會(huì)顯示滾動(dòng)條。 |
| scroll | 瀏覽器會(huì)顯示滾動(dòng)條，如果需要內(nèi)容會(huì)被修剪。 |
| auto | 內(nèi)容會(huì)被修剪，如果需要?jiǎng)t顯示滾動(dòng)條。 |
| inherit | overflow 屬性的值從父元素繼承。 |
瀏覽器支持
所有主要瀏覽器都支持 overflow 屬性。
注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有規(guī)定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。
提示和注釋
提示：如果您想要隱藏整個(gè)文檔的滾動(dòng)條，請(qǐng)?jiān)?body 或 html 元素上使用 overflow 屬性。
實(shí)例
實(shí)例
使用 overflow 屬性來隱藏溢出的內(nèi)容：
<html>
<head>
<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">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br>
<input type="button" onclick="displayResult()" value="Hide overflow">
</body>
</html>
<head>
<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">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br>
<input type="button" onclick="displayResult()" value="Hide overflow">
</body>
</html>
嘗試一下 ?
Style 對(duì)象
更多建議：