[解決済み] jQueryのwidth, innerWidth, outerWidthとheight, innerHeight, outerHeightの違いとは?
2022-05-14 01:02:40
質問
サンプルコードを書いてみたのですが、幅と高さが同じになってしまいました。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var div = $('.test');
var width = div.width(); // 200 px
var innerWidth = div.innerWidth(); // 200px
var outerWidth = div.outerWidth(); // 200px
var height = div.height(); // 150 px
var innerHeight = div.innerHeight(); // 150 px
var outerHeight = div.outerHeight(); // 150 px
});
</script>
<style type="text/css">
.test
{
width: 200px;
height: 150px;
background: black;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
この例では、両者が同じ結果を出力していることがわかります。もし、何が違うのか知っている人がいれば、適切な答えを示してください。
ありがとうございます。
どのように解決するのですか?
あなたはこれらの例を参照してくださいましたか?あなたの質問に似ています。
関連
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] SCSSとSassの違いは何ですか?
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] JavaScriptのnullとundefinedの違いは何ですか?
-
[解決済み] visibility:hiddenとdisplay:noneの違いは何ですか?
-
[解決済み] angular-routeとangular-ui-routerの違いは何ですか?
-
[解決済み] substrとsubstringの違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、ローテーションの説明
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
Vueのクラススタイルの使い方の詳細
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み] 期待される代入または関数呼び出し: 未使用式なし ReactJS
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ
-
JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方