CSS の高さルールを定義せずに Div の高さを取得するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS の高さルールを定義せずに Div の高さを取得するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-11-01 02:41:28

オリジナル

473 人が閲覧しました

How to Get the Height of a Div Without a Defined CSS Height Rule?

未定義の CSS 高さルールを使用して Div の高さを取得する方法

明示的な CSS 高さルールを使用せずに要素の高さを決定する方法は次のとおりです。挑戦的。ただし、jQuery JavaScript ライブラリによって提供されるメソッドを使用することは可能です。

jQuery .height メソッド

元の想定に反して、jQuery .height() メソッドは次のことを行います。事前定義された CSS 高さルールは必要ありません。現在のスタイルを考慮して、要素の計算された高さを取得します。このメソッドは、デフォルトでパディング、ボーダー、マージンを除外します。

その他のオプション

.height() に加えて、次のメソッドも使用できます:

.innerHeight(): パディングを含み、境界線とマージンを除いた高さを返します。
.outerHeight(): 境界線を含む高さを返しますが、マージンを除く
.outerHeight(true): マージンを含む高さを返します。

例

次の HTML および jQuery コード:

<code class="html"><div id="heightTest"></div>

<script>
  $(function() {
    var $heightTest = $('#heightTest');
    $heightTest.html('This is the test div.');

    console.log('Height (.height() returns): ', $heightTest.height());
    console.log('Inner Height (.innerHeight() returns): ', $heightTest.innerHeight());
    console.log('Outer Height (.outerHeight() returns): ', $heightTest.outerHeight());
    console.log('Outer Height (.outerHeight(true) returns): ', $heightTest.outerHeight(true));
  });
</script></code>

ログイン後にコピー

出力:

Height (.height() returns): 18px
Inner Height (.innerHeight() returns): 56px
Outer Height (.outerHeight() returns): 58px
Outer Height (.outerHeight(true) returns): 88px

ログイン後にコピー

結論

jQuery メソッドは便利な機能を提供しますCSS の高さルールが定義されているかどうかに関係なく、要素の高さを取得する方法。この機能は、動的な Web コンポーネントやレイアウトの調整に役立ちます。

以上がCSS の高さルールを定義せずに Div の高さを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。