32

パディングや境界線を使用せずに、要素の内側の高さを取得するにはどうすればよいですか?

jQueryはなく、純粋なJSと、クロスブラウザーソリューション(IE7を含む)

ここに画像の説明を入力してください

4

5 に答える 5

35
var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");

上記のバージョンは、最新のブラウザで動作します。currentStyleIEブラウザを確認してください。

于 2012-11-17T23:20:42.247 に答える
6

clientHeight-パディングを含むが 境界線を含まない 高さを指定します。

getComputedStyle-要素のCSSルールを利用して、プロパティの値を取得する方法(パディング)

parseIntの使用は、単位を取り除き、数値(ピクセル単位)のみを残す方法であり
parseFloat、より正確なサブピクセル測定にも使用できます。

すべての値は、DOMAPIによって自動的にピクセルに変換されることに注意してください

function getInnerHeight( elm ){
  var computed = getComputedStyle(elm),
      padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);

  return elm.clientHeight - padding
}

デモ:

// main method
function getInnerHeight( elm ){
  var computed = getComputedStyle(elm),
      padding = parseInt(computed.paddingTop) + parseInt(computed.paddingBottom);
  
  return elm.clientHeight - padding
}

// demo utility function
function printInnerHeight( selector ){
  console.clear()
  console.log(
    getInnerHeight( document.querySelector(selector) )
  )
}
body{ display: flex; padding:0; margin: 0; }
div{ flex: 1; }

.demo1{
  padding-top: 2vh;
  padding-bottom: 1vh;
  margin: 30px;
  border: 10px solid salmon;
  box-sizing: border-box;
  outline: 1px solid red;
}

.demo2{
  padding-top: 2vh;
  padding-bottom: 4vh;
  margin: 30px;
  border: 10px solid salmon;
  border-bottom-width: 0;
  height: 150px;
  outline: 1px solid red;
}


p::before{
  content: '';
  display: block;
  height: 100%;
  min-height: 50px;
  background: lightgreen;
}
<div>
  <h2>inner height should be ~50px</h2>
  <button onclick="printInnerHeight('.demo1')">Get Inner Height</button>
  <p class='demo1'></p>
</div>
<div>
  <h2>inner height should be ~150px</h2>
  <button onclick="printInnerHeight('.demo2')">Get Inner Height</button>
  <p class='demo2'></p>
</div>

于 2020-01-24T15:59:51.097 に答える
2

コメントから編集:

http://jsfiddle.net/hTGCE/1/(予想よりも少し多くのコード)

インターネットでは、次のような機能があります。

  function getRectangle(obj) {

          var r = { top: 0, left: 0, width: 0, height: 0 };

          if(!obj)
             return r;

          else if(typeof obj == "string")
             obj = document.getElementById(obj);


          if(typeof obj != "object")
             return r;

          if(typeof obj.offsetTop != "undefined") {

             r.height = parseInt(obj.offsetHeight);
             r.width  = parseInt(obj.offsetWidth);
             r.left = r.top = 0;

             while(obj && obj.tagName != "BODY") {

                r.top  += parseInt(obj.offsetTop);
                r.left += parseInt(obj.offsetLeft);

                obj = obj.offsetParent;
             }
          }
          return r;
       }

パディング/border-widthを減算する場合は、css-fileで設定され、style属性では動的ではありません。

    var elem = document.getElementById(id);
    var borderWidth = 0;

          try {
             borderWidth = getComputedStyle(elem).getPropertyValue('border-top-width');

             } catch(e) {

             borderWidth = elem.currentStyle.borderWidth;
          } 
    borderWidth = parseInt(borderWidth.replace("px", ""), 10);

と同じパディングで。次に、それを計算します。

于 2012-11-17T23:22:09.590 に答える
0

clientHeightclientWidthプロパティを使用するだけです。

Element.clientHeightのMDNWebドキュメント—clientWidthはまったく同じように機能します。

于 2019-02-15T02:43:47.733 に答える
-1

私は同じ問題を抱えていて、ネイティブのクロスプラットフォームソリューションがないことを知りましたが、ソリューションは簡単ですが

var actual_h = element.offsetHeight;

            if(parseInt(element.style.paddingTop.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingTop.replace('px',''));

            }
            if(parseInt(element.style.paddingBottom.replace('px','')) > 0){
                actual_h=actual_h -  parseInt(element.style.paddingBottom.replace('px',''));

            }
于 2014-02-25T22:32:22.423 に答える