当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

HTML Style overflow用法及代码示例


HTML DOM中的样式溢出属性用于指定内容溢出元素框时的行为。根据该值，可以隐藏，显示内容或显示滚动条。

用法:

  • 它返回溢出属性。
    object.style.overflow
  • 它用于设置溢出属性。
    object.style.overflow = "visible|hidden|scroll|auto|initial|
inherit"

属性值：


  • visible:内容没有被裁剪，并且可能溢出包含元素。

    例：

    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style overflow Property 
    </title> 
      
    <style> 
        .content { 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
            overflow:hidden; 
        } 
  
        button { 
            margin-top:60px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style overflow Property</b> 
      
    <p> 
        The Style overflow property in HTML DOM is 
        used to specify the behavior of the content 
        when it overflows the element box. 
    </p> 
  
    <div class="content"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and 
        explained computer science and programming 
        articles, quizzes and interview questions. 
        <br>The portal also has dedicated GATE 
        preparation and competitive programming  
        sections. 
    </div> 
      
    <button onclick="setOverflow()"> 
        Change overflow 
    </button> 
  
    <!-- Script to set overflow to visible -->
    <script> 
        function setOverflow() { 
            elem = document.querySelector('.content'); 
            elem.style.overflow = 'visible'; 
        } 
    </script> 
</body> 
  
</html>                    

    输出：

    • 在单击按钮之前：
      visible-before
    • 单击按钮后：
      visible-after
  • hidden:内容被裁剪并隐藏以适合元素。使用此值时，不提供滚动条。

    例：

    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style overflow Property 
    </title> 
      
    <style> 
        .content { 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
        } 
  
        button { 
            margin-top:60px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style overflow Property</b> 
      
    <p> 
        The Style overflow property in HTML DOM is 
        used to specify the behavior of the content 
        when it overflows the element box. 
    </p> 
  
    <div class="content"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and 
        explained computer science and programming 
        articles, quizzes and interview questions. 
        <br>The portal also has dedicated GATE 
        preparation and competitive programming  
        sections. 
    </div> 
      
    <button onclick="setOverflow()"> 
        Change overflow 
    </button> 
  
    <!-- Script to set overflow to visible -->
    <script> 
        function setOverflow() { 
            elem = document.querySelector('.content'); 
            elem.style.overflow = 'hidden'; 
        } 
    </script> 
</body> 
  
</html>                    

    输出：

    • 在单击按钮之前：
      hidden-before
    • 单击按钮后：
      hidden-after
  • scroll:裁剪内容以适合元素框，并提供滚动条以帮助滚动溢出的内容。即使未剪切内容，也会在此处添加滚动条。

    例：

    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style overflow Property 
    </title> 
      
    <style> 
        .content { 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
            overflow:hidden; 
        } 
  
        button { 
            margin-top:60px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style overflow Property</b> 
      
    <p> 
        The Style overflow property in HTML DOM is 
        used to specify the behavior of the content 
        when it overflows the element box. 
    </p> 
  
    <div class="content"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and 
        explained computer science and programming 
        articles, quizzes and interview questions. 
        <br>The portal also has dedicated GATE 
        preparation and competitive programming  
        sections. 
    </div> 
      
    <button onclick="setOverflow()"> 
        Change overflow 
    </button> 
  
    <!-- Script to set overflow to visible -->
    <script> 
        function setOverflow() { 
            elem = document.querySelector('.content'); 
            elem.style.overflow = 'scroll'; 
        } 
    </script> 
</body> 
  
</html>                    

    输出：

    • 在单击按钮之前：
      scroll-before
    • 单击按钮后：
      scroll-after
  • auto:auto的行为取决于内容，仅在内容溢出时才添加滚动条。

    例：

    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style overflow Property 
    </title> 
      
    <style> 
        .content { 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
            overflow:visible; 
        } 
  
        button { 
            margin-top:60px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style overflow Property</b> 
      
    <p> 
        The Style overflow property in HTML DOM is 
        used to specify the behavior of the content 
        when it overflows the element box. 
    </p> 
  
    <div class="content"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and 
        explained computer science and programming 
        articles, quizzes and interview questions. 
        <br>The portal also has dedicated GATE 
        preparation and competitive programming  
        sections. 
    </div> 
      
    <button onclick="setOverflow()"> 
        Change overflow 
    </button> 
  
    <!-- Script to set overflow to visible -->
    <script> 
        function setOverflow() { 
            elem = document.querySelector('.content'); 
            elem.style.overflow = 'auto'; 
        } 
    </script> 
</body> 
  
</html>                    

    输出：

    • 在单击按钮之前：
      auto-before
    • 单击按钮后：
      auto-after
  • initial:它用于将此属性设置为其默认值。

    例：

    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style overflow Property 
    </title> 
      
    <style> 
        .content { 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
            overflow:scroll; 
        } 
  
        button { 
            margin-top:60px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style overflow Property</b> 
      
    <p> 
        The Style overflow property in HTML DOM is 
        used to specify the behavior of the content 
        when it overflows the element box. 
    </p> 
  
    <div class="content"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and 
        explained computer science and programming 
        articles, quizzes and interview questions. 
        <br>The portal also has dedicated GATE 
        preparation and competitive programming  
        sections. 
    </div> 
      
    <button onclick="setOverflow()"> 
        Change overflow 
    </button> 
  
    <!-- Script to set overflow to visible -->
    <script> 
        function setOverflow() { 
            elem = document.querySelector('.content'); 
            elem.style.overflow = 'initial'; 
        } 
    </script> 
</body> 
  
</html>                    

    输出：

    • 在单击按钮之前：
      initial-before
    • 单击按钮后：
      initial-after
  • inherit:这将从其父项继承该属性。

    例：

    <!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style overflow Property 
    </title> 
      
    <style> 
        #parent { 
            overflow:auto; 
        } 
  
        .content { 
            background-color:lightgreen; 
            height:150px; 
            width:200px; 
        } 
  
        button { 
            margin-top:60px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style overflow Property</b> 
      
    <p> 
        The Style overflow property in HTML DOM is used 
        to specify the behavior of the content when it 
        overflows the element box. 
    </p> 
      
    <div id="parent"> 
        <div class="content"> 
            GeeksforGeeks is a computer science portal with 
            a huge variety of well written and explained 
            computer science and programming articles,  
            quizzes and interview questions.<br>The portal 
            also has dedicated GATE preparation and competitive 
            programming sections. 
        </div> 
    </div> 
      
    <button onclick="setOverflow()"> 
        Change overflow 
    </button> 
  
    <!-- Script to set overflow to inherit -->
    <script> 
        function setOverflow() { 
            elem = document.querySelector('.content'); 
            elem.style.overflow = 'inherit'; 
        } 
    </script> 
</body> 
  
</html>                    

    输出：

  • 在单击按钮之前：
    inherit-before
  • 单击按钮后：
    inherit-after

支持的浏览器：DOM样式溢出属性支持的浏览器如下：

  • 谷歌浏览器
  • IE浏览器
  • Firefox
  • Opera
  • 苹果Safari


相关用法


注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style overflow Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。