Hatena::ブログ(Diary)

webのべんきょうは実践。

2017年08月24日

指定要素の高さを自動で取得するかき方

cssのクラスに高さを取得するかきかたって?

ふと人が話しているのをきいてどうだっけ?ってなったので調べてみた。

久しぶりの更新である。

参考サイト

指定のbox要素の高さを取得して、別のbox要素に適用する - jsdo.it - Share JavaScript, HTML5 and CSS

jQuery: 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth) - Build Insider

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box { 
    background: red;
    width: 100px;
    height: 250px;
    float: left;
}
/* 高さを調節する要素 */
.adjustHeightBox {
    background: blue;		
    width: 100px;
    /*height: none*/ 
    float: left;
    padding: 20px;
}
	</style>
</head>
<body>
	<div class="box"></div>
	<div class="adjustHeightBox"></div>
	<div id = "divMessage"></div>
	<script src="/javascript_lesson/js/jquery-2.2.3.min.js"></script>
	<script>

// 赤背景のボックスの高さに合わせる
$(function(){
  var boxHeight = $('.box').height();
	$('.adjustHeightBox').css('height', boxHeight + 'px');
});
// 数値を表示
$(function() {
  var b = $('.adjustHeightBox');
  console.log('コンテンツ本体:' + b.height() + '×' + b.width());
  console.log('内部余白込み:' + b.innerHeight() + '×' + b.innerWidth());
  console.log('枠線込み:' + b.outerHeight() + '×' + b.outerWidth());
  console.log('外部余白込み:' + b.outerHeight(true) + '×' + b.outerWidth(true));
});

</script>
</body>
</html>

イメージ

f:id:hukumarukun:20170824004446p:image