パディングや境界線を使用せずに、要素の内側の高さを取得するにはどうすればよいですか?
jQueryはなく、純粋なJSと、クロスブラウザーソリューション(IE7を含む)
パディングや境界線を使用せずに、要素の内側の高さを取得するにはどうすればよいですか?
jQueryはなく、純粋なJSと、クロスブラウザーソリューション(IE7を含む)
var style = window.getComputedStyle(document.getElementById("Example"), null);
style.getPropertyValue("height");
上記のバージョンは、最新のブラウザで動作します。currentStyle
IEブラウザを確認してください。
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>
コメントから編集:
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);
と同じパディングで。次に、それを計算します。
clientHeight
とclientWidth
プロパティを使用するだけです。
Element.clientHeightのMDNWebドキュメント—clientWidthはまったく同じように機能します。
私は同じ問題を抱えていて、ネイティブのクロスプラットフォームソリューションがないことを知りましたが、ソリューションは簡単ですが
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',''));
}