jQueryで非表示要素の高さを取得するにはどうすればよいですか?-jsチュートリアル-php.cn

jQueryで非表示要素の高さを取得するにはどうすればよいですか?

青灯夜游

リリース： 2019-04-17 10:38:23

オリジナル

3337 人が閲覧しました

HTML 要素は、jquery の Hide() 関数を使用して非表示にすることも、CSS で Visibility:hidden; を使用することによって簡単に非表示にすることもできます。 jquery を使用して、この隠し要素の高さを簡単に見つけることもできます。 jQueryで隠し要素の高さを取得する方法については以下の記事で紹介していますので、ご参考になれば幸いです。 [ビデオチュートリアルの推奨: jQuery チュートリアル]

jQueryで非表示要素の高さを取得するにはどうすればよいですか?

各 HTML 要素は 2 つの高さを定義します。つまり、要素の innerheight と outerheight:

##●

innerHeight: 選択した要素の境界線の幅が考慮されない場合、この高さが考慮されます。

#outerHeight: この高さは、選択した要素の境界線の幅を考慮するときに考慮されます。

コード例を通じて、これら 2 つの高さを取得する方法を見てみましょう。

例 1: 隠し要素の innerHeight 高さを取得する

html コード

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			body {
				border: 1px solid red;
				padding: 10px;
				width: 300px;
			}
			
			div {
				width: 310px;
				height: 80px;
				font-weight: bold;
				color: red;
				font-size: 25px;
				border: 1px solid red;
				visibility: hidden;/*隐藏元素*/
			}
		</style>
	</head>

	<body>
		<div>hello world!</div>

		<p id="demo">
			这里将显示隐藏的“div”元素的高度。
		</p>

		<button id="btn1">获取高度</button>

	</body>
	<script type="text/javascript" src="../demo/js/jquery.min.js"></script>
	<script>
		//jquery代码
	</script>

</html>

ログイン後にコピー

jquery コード

$(document).ready(function() {
   $("#btn1").click(function() {
      var demo = $("div").innerHeight();
      $("#demo").text(demo);
   });
});

ログイン後にコピー

出力:

jQueryで非表示要素の高さを取得するにはどうすればよいですか?

説明:

height: 80px; を使用して、非表示の div の高さを 80 に設定し、jQuery の innerHeight() 関数で取得できます。 innerHeight の高さ、境界線の幅は結果に加算されないため、取得される高さは 80 になります。

#例 2:

隠し要素の externalHeight を取得する
jquery コード

$(document).ready(function() { 
       $("#btn1").click(function() { 
                var demo = $("div").outerHeight(); 
                $("#demo").text(demo); 
        }); 
});

ログイン後にコピー

出力:

jQueryで非表示要素の高さを取得するにはどうすればよいですか? 注: jQueryのouterHeight()関数を使用して取得できるのはouterHeightの高さで、結果には境界線の幅が加算されるため、取得される高さは82になります。