免費AI編程助手
Style overflow 屬性
Style 對象
定義和用法
overflow 屬性設置或返回如何處理呈現(xiàn)在元素框外面的內(nèi)容。
語法
設置 overflow 屬性：
Object.style.overflow="visible|hidden|scroll|auto|inherit"
返回 overflow 屬性：
Object.style.overflow
| 值 | 描述 |
|---|---|
| visible | 默認。內(nèi)容不會被修剪，會顯示在元素框之外。 |
| hidden | 內(nèi)容會被修剪，元素框外面的內(nèi)容不會被顯示，瀏覽器不會顯示滾動條。 |
| scroll | 瀏覽器會顯示滾動條，如果需要內(nèi)容會被修剪。 |
| auto | 內(nèi)容會被修剪，如果需要則顯示滾動條。 |
| inherit | overflow 屬性的值從父元素繼承。 |
瀏覽器支持
所有主要瀏覽器都支持 overflow 屬性。
注意：IE7 及更早的版本不支持 "inherit" 值。IE8 只有規(guī)定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。
提示和注釋
提示：如果您想要隱藏整個文檔的滾動條，請在 body 或 html 元素上使用 overflow 屬性。
實例
實例
使用 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 對象
更多建議：