當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


HTML Style flexShrink用法及代碼示例


HTML DOM中的Style flexShrink屬性用於設置特定項目相對於容器內其餘靈活項目的收縮方式。句法:

  • 用於返回flexShrink屬性。
    object.style.flexShrink
  • 它用於設置flexShrink屬性。
    object.style.flexShrink = "number|initial|inherit"

屬性值:

  • number:它用於設置一個數字,該數字指定相對於其餘柔性物料可收縮多少物料。其默認值為0。
  • initial:它將flexShrink屬性設置為其默認值。
  • inherit:此屬性值是從其父元素繼承的。

示例1:


<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Style flexShrink Property 
    </title> 
    <style> 
        #Geeks { 
            width:350px; 
            height:100px; 
            border:1px solid #c3c3c3; 
            display:flex; 
        } 
          
        #Geeks div { 
            flex-grow:1; 
            flex-shrink:1; 
            flex-basis:300px; 
        } 
    </style> 
</head> 
  
<body> 
    <h4>Click the button</h4> 
    <button onclick="GFG()">Click Here! 
        <br> 
    </button> 
    <p></p> 
    <div id="Geeks"> 
        <div style="background-color:#64c962; 
                    color:white;"> 
          GeeksForGeeks1 
      </div> 
        <div style="background-color:#2c932a; 
                    color:white;"  
             id="Geeks2"> 
          GeeksForGeeks2 
      </div> 
    </div> 
    
    <script> 
        function GFG() { 
            
            // Safari 6.1+ 
            document.getElementById( 
              "Geeks2").style.WebkitFlexShrink = "5";  
            
            document.getElementById( 
              "Geeks2").style.flexShrink = "5"; 
        } 
    </script> 
</body> 
  
</html>

輸出:

示例2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML DOM Style flexShrink Property 
    </title> 
    <style> 
        #Geeks { 
            width:350px; 
            height:100px; 
            border:1px solid #c3c3c3; 
            display:flex; 
        } 
          
        #Geeks div { 
            flex-grow:1; 
            flex-shrink:1; 
            flex-basis:300px; 
        } 
    </style> 
</head> 
  
<body> 
    <h3>The flex-shrink Property</h3> 
    
    <div id="Geeks"> 
        <div style="background-color:#44cc3f;"> 
      </div> 
        <div style="background-color:#34a030;"> 
      </div> 
        <div style="background-color:#2c932a;"> 
      </div> 
        <div style="background-color:#267023;"> 
      </div> 
        <div style="background-color:#175415;"> 
      </div> 
    </div> 
    
</body> 
  
</html>

輸出:

支持的瀏覽器:DOM HashChangeEvent屬性支持的瀏覽器如下:

  • 穀歌瀏覽器5.0
  • Internet Explorer 8.0
  • Firefox 3.6
  • Opera 10.6
  • Safari 5.0


相關用法


注:本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 HTML | DOM Style flexShrink Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。