備忘錄_20160105(定位) 修改 回首頁
程式　2019-10-18　23:54:17　1571414057　100
html5 css3 javascript width height 讀取
html5 css3 javascript width height 讀取

20191018_widthHeight.htm

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
      
      *
      {
        margin: 0;
        padding: 0;
      }
      
      #class1
      {
        display: block;      /* none, block, inline, inline-block */
        position: static;    /* static, absolute, fixed, relative */
        float: none;         /* none, left, right */
        z-index: 0;          /* -int,0,+int */
        visibility: visible; /* visible, hidden */
        
        margin: 3px;
        
        border-style: solid;
        border-width: 1px;
        border-color: red;
        
        padding: 2px;
        
        font-family: Courier;
        font-weight: normal;
        font-size: 16px;
      }
      
      #class2
      {
        display: inline;     /* none, block, inline, inline-block */
        position: static;    /* static, absolute, fixed, relative */
        float: none;         /* none, left, right */
        z-index: 0;          /* -int,0,+int */
        visibility: visible; /* visible, hidden */
        
        margin: 3px;
        
        border-style: solid;
        border-width: 1px;
        border-color: green;
        
        padding: 2px;
        
        font-family: Courier;
        font-weight: normal;
        font-size: 16px;
      }

      #class3
      {
        display: inline-block; /* none, block, inline, inline-block */
        position: static;      /* static, absolute, fixed, relative */
        float: none;           /* none, left, right */
        z-index: 0;            /* -int,0,+int */
        visibility: visible;   /* visible, hidden */
        
        margin: 3px;
        
        border-style: solid;
        border-width: 1px;
        border-color: blue;
        
        padding: 2px;
        
        font-family: Courier;
        font-weight: normal;
        font-size: 16px;
      }
      
    </style>
  </head>
  <body>
    
    <div id="class1">第一個</div>
    <div id="class2">第二個</div>
    <div id="class3">第三個</div>
    <br>
    <div id="report">
    </div>
    
    <script>
    
      function gebi(strId)
      {
        return document.getElementById(strId);
      }
      
      window.onload=function()
      {
        var oCS1=window.getComputedStyle(gebi("class1"));
        var oCS2=window.getComputedStyle(gebi("class2"));
        var oCS3=window.getComputedStyle(gebi("class3"));

        var oBCR1=gebi("class1").getBoundingClientRect();
        var oBCR2=gebi("class2").getBoundingClientRect();
        var oBCR3=gebi("class3").getBoundingClientRect();

        var obj1=gebi("class1");
        var obj2=gebi("class2");
        var obj3=gebi("class3");
        
        gebi("report").innerHTML
          = "window.getComputedStyle(gebi('strId')).width/height" + "<br>\r\n"
          + "[content] (css3 預設的 width, height 是針對 content)" + "<br>\r\n"
          + "class1->" + oCS1.width + ", " + oCS1.height + "<br>\r\n"
          + "class2->" + oCS2.width + ", " + oCS2.height + "<br>\r\n"
          + "class3->" + oCS3.width + ", " + oCS3.height + "<br>\r\n"
          + "<hr>\r\n"
          + "gebi('strId').getBoundingClientRect().width/height" + "<br>\r\n"
          + "[border + padding + content + padding + border]" + "<br>\r\n"
          + "class1->" + oBCR1.width + ", " + oBCR1.height + "<br>\r\n"
          + "class2->" + oBCR2.width + ", " + oBCR2.height + "<br>\r\n"
          + "class3->" + oBCR3.width + ", " + oBCR3.height + "<br>\r\n"
          + "<hr>\r\n"
          + "gebi('strId').offsetWidth/offsetHeight" + "<br>\r\n"
          + "[border + padding + content + padding + border]" + "<br>\r\n"
          + "class1->" + obj1.offsetWidth + ", " + obj1.offsetHeight + "<br>\r\n"
          + "class2->" + obj2.offsetWidth + ", " + obj2.offsetHeight + "<br>\r\n"
          + "class3->" + obj3.offsetWidth + ", " + obj3.offsetHeight + "<br>\r\n";
          
      }
      
    </script>
    
  </body>
</html>