HTML DOM overflow ÊôÐÔ
¶¨ÒåºÍÓ÷¨
overflow ÊôÐԹ涨ÈçºÎ´¦ÀíÈçºÎ´¦Àí²»·ûºÏÔªËØ¿òµÄÄÚÈÝ¡£
Óï·¨£º
Object.style.overflow=visible|hidden|scroll|auto
¿ÉÄܵÄÖµ
Öµ | ÃèÊö |
---|---|
visible | ÄÚÈݲ»»á±»ÐÞ¼ô£¬»á³ÊÏÖÔÚÔªËØ¿òÖ®Íâ¡£ |
hidden | ÄÚÈݻᱻÐÞ¼ô£¬µ«ÊÇä¯ÀÀÆ÷²»»áÏÔʾ¹©²é¿´ÄÚÈݵĹö¶¯Ìõ¡£ |
scroll | ÄÚÈݻᱻÐÞ¼ô£¬µ«ÊÇä¯ÀÀÆ÷»áÏÔʾ¹ö¶¯ÌõÒÔ±ã²é¿´ÆäÓàµÄÄÚÈÝ¡£ |
auto | ÓÉä¯ÀÀÆ÷¾ö¶¨ÈçºÎÏÔʾ¡£Èç¹ûÐèÒª£¬ÔòÏÔʾ¹ö¶¯Ìõ¡£ |
ʵÀý
±¾ÀýʹÓà overflow À´ÏÔʾÒç³öÔªËØ¿òµÄÄÚÈÝ£º
<html>
<head>
<style type="text/css">
div
{
border:thin solid green;
width:100px;
height:100px;
}
</style>
<script type="text/javascript">
function hideOverflow()
{
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="hideOverflow()"
value="Hide overflow" />
</body>
</html>