HTML CSS Reference/CSS Attributes and Javascript Style Properties/overflow

Материал из Web эксперт
Перейти к: навигация, поиск

"overflow" Example

    
<html>
<script language="JavaScript">
function function1(){
    if(myBody.style.overflow=="auto"){
       myBody.style.overflow="scroll";
       myButton.value="Set overflow to hidden.";
       results.innerText="overflow is set to scroll.";
       return false;
    }
    if (myBody.style.overflow=="scroll"){
       myBody.style.overflow="hidden";
       myButton.value="Set overflow to auto";
       results.innerText="overflow is set to hidden.";
       return false;
    }
    if(myBody.style.overflow=="hidden"){
       myBody.style.overflow="auto";
       myButton.value="Set overflow to scroll";
       results.innerText="overflow is set to auto.";
       return false;
    } 
} 
</script>
<body id="myBody" bottommargin="250" style="overflow:auto">
<div id="results" style="color:red">overflow is set to auto.</div>
<br>
<input id=myButton type=button value="Set overflow to scroll" onclick="function1();">
</body>
</html>



"overflow" is applied to

+----------------+--------------------------------------------------------------+
| Applied_To     |<a>                             <acronym>                     |
|                |<address>                       <applet>                      |
|                |<b>                             <bdo>                         |
|                |<big>                           <blockquote>                  |
|                |<body>                          <center>                      |
|                |<cite>                          <code>                        |
|                |<col>                           <colgroup>                    |
|                |currentStyle                    <custom>                      |
|                |<dd>                            defaults                      |
|                |<del>                           <dfn>                         |
|                |<dir>                           <div>                         |
|                |<dl>                            <dt>                          |
|                |<em>                            <embed>                       |
|                |<fieldset>                      <font>                        |
|                |<form>                          <hn>                          |
|                |<html>                          <i>                           |
|                |<input type="button">           <input type="checkbox">       |
|                |<input type="file">             <input type="image">          |
|                |<input type="password">         <inputtype="radio">           |
|                |<input type="reset">            <input type="submit">         |
|                |<input type="text">             <ins>                         |
|                |<kbd>                           <label>                       |
|                |<legend>                        <li>                          |
|                |<listing>                       <menu>                        |
|                |<ol>                            <p>                           |
|                |<pre>                           <q>                           |
|                |<rt>                            <ruby>                        |
|                |runtimeStyle                    <s>                           |
|                |<samp>                          <small>                       |
|                |<span>                          <strike>                      |
|                |<strong>                        style                         |
|                |<sub>                           <sup>                         |
|                |<textarea>                      <tt>                          |
|                |<u>                             <ul>                          |
|                |<var>                           <xmp>                         |
+----------------+--------------------------------------------------------------+



"overflow" Possible Values

Possible Values
visible       The default; the entire content is shown
scroll        Excess content is clipped and scroll bars are added
hidden        Excess content is clipped and scroll bars are not shown
auto          Excess content is clipped and scroll bars are added when necessary



"overflow" Syntax and Note

Note:
How to deal with exceeded element content. 
This style is applicable to positioned elements only.
Syntax:
    
element { overflow: value }
elementID.style.overflow = "value"
document.all.elementID.style.overflow = "value" // IE only