$(document).height() デバイスの画面サイズと向きを出力する アプリ画面で立て向き専用に設定したい場合もありますが、スマホのwebブラウザ上でアプリを動作させている限り、画面の向きを固定することはできないので、 iframe要素を記述し、その直後にjQuery iframe auto height pluginを動作させるコードを記述します。jQueryなので"$"を使ってもかまいませんが、他のライブラリとの共存を考えると"jQuery"と書いておいた方が後々問題が発生せず良いのではないかと考えます。 ・「height()」でアニメーションさせる方法, jQueryのheightメソッドについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！, それでは、まず最初に「height()」についての基本的な知識から勉強していきましょう！, 「height()」は、HTML要素の高さを取得・設定することができるメソッドになります。, ただし、HTML要素のサイズは以下のような構成になっている点に注意が必要です。 ・「height()」で複数要素を取得 jQueryで要素を追加するいくつかの方法〜append,prepend,before,after,wrapなど. var pbjs=pbjs||{}; googletag.defineSlot('/21812778492/blog_728x90_common_eyecatch01_adsence', [728, 90], 'div-gpt-ad-1566564252373-0').addService(googletag.pubads()); セレクタにwindowを利用することでウインドウ高さ、documentを利用することでドキュメント高さも取得できます（設定はできません）。 サンプル（ height/03.html ）を開いてbody内に大きなdiv要素があることを確認してください。 pbjs.setConfig({bidderTimeout:2000}); googletag.cmd.push(function() { googletag.cmd = googletag.cmd || []; googletag.enableServices(); うまく取得できない場合 「数値は取得できるものの、何かオカシイ」という場合は、上記コードをどこで走らせているかが原因であることが多い。 もし、対象のコンテンツの中に画像が配置してあったりした場合、 $(document).ready にしかけても画像を取得する前の高さ（幅）を取得している。 上記のサンプルの通り、高さ、そして、横幅をそれぞれ heightとwidthメソッドで指定することができます。 「height()」で複数要素を取得. Copyright (C) 2015 ADOKIKAKU All Rights Reserved. もともと、position: absolute;を指定する場面では問題ないと思いますが、そうでない場合は表示するときにposition: absolute;を解除する必要があります。 }); jQueryにて要素の高さを設定したり、取得する為のメソッドとしてheightメソッドがあります。, ・「height()」の設定 取得する直前にdisplay: block;で表示する場合のデモページ HTMLで、divで作成したボックスやimgなどを配置した各種コンテンツの縦横幅を取得したい時のメモ。 →サービスページはこちら display: none;で要素を非表示にした状態のとき、その要素のサイズが取得できない場合があります。 イマイチ暗記ができないので、ココにまとめてメモを残しておこうと思う。, ここでは、複数のdivタグにclass="box"を設定したと想定し、一番大きなサイズのボックスに合わせる場合のコードを紹介する。, 「数値は取得できるものの、何かオカシイ」という場合は、上記コードをどこで走らせているかが原因であることが多い。 jQueryで処理されるタイミング 【div箱の高さが取得できない！の原因１】. All rights reserved. なぜ、私のJavaScriptは、Postmanがアクセスできない場合、「要求されたリソースにAccess Control-Allow-Originのヘッダーが存在しません」というエラーが表示されるのはなぜですか. jquery - 高さ - outerheight 取得できない . googletag.pubads().setTargeting('blog_type', 'Tech'); ちなみにheight()はpxなどの単位は除外され、整数で取得されます。. © Copyright 2020 flatFlag. googletag.defineSlot('/21812778492/blog_300x250_common_sidemiddle02_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198822157-0').addService(googletag.pubads()); jQueryのinnerHeight()やouterWidth() メソッド 【div箱の高さが取得できない！の原因２】, paddingを含めたサイズ(borderの内側までのサイズ)を取得する（marginとborderを含めない）. jQueryを使って、各コンテンツのmarginやpaddingを含めり はぶいたりした縦幅の値を取得する事ができる âåèï¼ã»ã¬ã¯ã¿ã«windowãè¨å®ãããµã³ãã«ï¼height/03b.htmlï¼. →フェイスブックはこちら. googletag.defineSlot('/21812778492/blog_468x60_common_eyecatch02_adsence', [728, 90], 'div-gpt-ad-1567575393317-0').addService(googletag.pubads()); Copyright designdrill All rights reserved. 対応しない場合のデモページ, display: none;の代わりにvisibility: hidden;で非表示にして、他要素の配置に影響が出ないようにposition: absolute;を指定してみます。, 一通り値が取得できました。 タブやプルダウンなど、display: none;で非表示にすることは多いので、うまくサイズを取得する方法がないか試してみました。, JavaScriptのoffsetHeightとclientHeightではサイズを取得できませんでしたが、jQueryで試したheight、innerHeight、outerHeight、css(‘height’)は取得できました。 jQueryを使って、各コンテンツのmarginやpaddingを含めり はぶいたりした縦幅の値を取得する事ができる イマイチ暗記ができないので、ココにまとめてメモを残しておこうと思う。 サイズを取得するjQueryのメソッド jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。 何とかなったので、解決方法 … →ツイッターはこちら もし、対象のコンテンツの中に画像が配置してあったりした場合、 $(document).ready にしかけても画像を取得する前の高さ（幅）を取得している。 たいていの場合は、$(window).load にしかければうまくいく。, 処理をかける（取得する）タイミングについては、次の記事を参考にしてほしい。 margin,border,paddingを含めた値を取得できないのは具合が悪いです。そこで.outerWidth()の出番です。.outerWidth()はデフォルトではborder,paddingを含めた値を取得できるが、引数にtrueを指定するとmargin,border,paddingを含めた値を取得できます。 googletag.defineSlot('/21812778492/blog_300x250_common_fixed01_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565194485392-0').addService(googletag.pubads()); // fixed01のWORKSが不定期なため共通処理とする JavaScriptのoffsetHeightとclientHeightではサイズを取得できませんでしたが、jQueryで試したheight、innerHeight、outerHeight、css(‘height’)は取得できました。 対応しない場合のデモページ visibility: hidden;とposition: absolute;を使った場合 borderã®å¤å´ãã¾ãã¯marginããå«ãã é«ããåå¾ãããå ´åã¯outerHeightã¡ã½ãããå©ç¨ãã¾ãã, ãµã³ãã«ï¼height/02.htmlï¼ã§ç¢ºèªããããã«ãè¤æ°ã®è¦ç´ ã®é«ããåå¾ãããã¨ãã¦ãæåã®è¦ç´ ããããåå¾ã§ãã¾ããããããmapã¡ã½ãããå©ç¨ãããã¨ã§å¯¾å¿å¯è½ã§ãããµã³ãã«ï¼height/test01.htmlï¼ã§ã¯buttonãã¯ãªãã¯ããã¨ãådivè¦ç´ ã®é«ããã¢ã©ã¼ãã§è¡¨ç¤ºããã¾ãï¼å¤ã¯é åã§ãï¼ã, æ¬å®¶ã®ãµã¤ãã§ã¯ã»ã¬ã¯ã¿ã«windowãè¨å®ããã¨ã¦ã¤ã³ãã¦ãµã¤ãºï¼browser viewportï¼ãå¾ãããã¨ããã®ã§ããdocumentã¨åãå¤ãè¿ã£ã¦ãã¾ããdocumentã¯ã³ã³ãã³ãå ¨ä½ã®é«ãã§ãã¹ã¯ãã¼ã«ããªãã¨è¦ããªãç¯å²ãå«ãã ã³ã³ãã³ãã®é«ããã¦ã¤ã³ãã¦ãµã¤ãºã¯ç´ç²ã«ãã©ã¦ã¶ã®ã¦ã¤ã³ãã¦ãµã¤ãºã¨æã£ã¦ããã®ã§ãããç§ã®èªèãããããã®ã§ããããï¼ 侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。, 「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。, 侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。侍テック編集部では技術系コンテンツを中心に有用な情報を発信していきます。 上記のようにpaddingの内側の高さが取得できました。. googletag.defineSlot('/21812778492/blog_300x250_common_fixed02_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565198391774-0').addService(googletag.pubads()); Light Boxなりの他のライブラリ関係が動かないのでそれらを全てOFFに。 jQueryのバージョンを下げてみる 1.9.1 から 1.8.3 にしてみても解決せず。 いらないJavaScriptをすべて止めてみる jQueryのcoreだけ読み込んで、 $(window).height(); を実行。まだバグってる。 結果（コンソール） 480. googletag.defineSlot('/21812778492/blog_728x90_common_overlay', [728, 90], 'div-gpt-ad-1584694002281-0').addService(googletag.pubads()); このように、「余白(margin / padding)」「枠線(border)」が存在しており、これらを差し引いた「高さ」を考慮する必要があります。, また、高さの取得だけでなく「設定」をすることも可能なので、意図的にHTML要素のサイズを制御できるメリットもあります。, 本記事では、「height()」の基本から応用技まで学習できるように解説していきますので、ぜひ参考にしてみてください！, この章では、「height()」を使った基本的な要素の高さを取得する方法について見ていきましょう！, 「height()」は、対象となるHTML要素にチェーンで繋いで実行するのが一般的です。, このように、対象となるHTML要素に対して「height()」を実行するだけで高さを取得することが可能です。, 複数の要素に対して高さを取得するには、本記事後半で解説するコールバック関数を引数に指定する必要があります。, それでは、実際に「height()」を使ってHTML要素の高さを取得してみましょう！, 対象となるHTML要素を「$('p')」と記述することでp要素を指定してheight()を実行していますね。, ちなみに、HTML要素の高さはCSSの「height」プロパティに設定した高さと同じになります。, 上記サンプルではjQueryオブジェクトとして $('#product_img') つまり、画像が”要素”にあたり、その要素の高さを400pxに設定する処理を行なっています。, そして、今回は横幅の設定ができるwidthメソッドと併せてメソッドチェーンで実装したサンプルコードをご紹介します。, 上記のサンプルの通り、高さ、そして、横幅をそれぞれheightとwidthメソッドで指定することができます。, この章では、複数のHTML要素を対象にして高さを取得する方法について見ていきます。, 関数の引数には、対象となるHTML要素の「index(インデックス番号)」「h(高さ)」が取得できる点も覚えておきましょう。, ちなみに、対象のHTML要素が複数ある場合はそれぞれの要素に対して「index / h」が取得できます。, つまり、2つのp要素はデフォルトの高さで、id属性が付与された要素はCSSで高さが決められているわけです。, そこで、これらのp要素の高さをまとめて取得するには「height()」を使って次のように記述します。, height()の引数に関数を設定し、その中で取得した「h（高さ）」を順番に出力しています。, 実行結果を見ると、CSSで設定された高さについてもしっかりと取得できているのが分かりますね。, このように関数を活用すれば、より複雑な処理を効率よく行えるので慣れておくようにしましょう！, jQueryにはウェブサイト上のアニメーションを表現するためのメソッドとしてanimateメソッドがあります。, そのanimateメソッドのプロパティとしてheightが存在し、アニメーションの際に高さに関する動きを設定することができます。, 上記サンプルで使用されているheightはanimateメソッドと一緒に使用するプロパティと呼ばれるものであり、高さを変えるアニメーションを実現するためのものです。, heightメソッドでは画像やテキストエリアなどの要素の高さを設定したり、既に存在する要素の高さを取得することができました。, また、animateメソッドと共に使われる場合は、高さを変化させるアニメーションを実現するためのプロパティとして活用できることを学びました。, もし今後、heightに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。, 当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。 googletag.defineSlot('/21812778492/blog_300x250_common_sidetop01_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565330658303-0').addService(googletag.pubads()); どうして$(window).height()が間違っているのですか? pbjs.que=pbjs.que||[]; jQueryで要素の高さを取得する方法ですが、高さといってもborderを含んだりpaddingの内側だったりとさまざまです。, 上図の赤字がメソッドですが、要素のどの部分を取得するかでそれぞれ用意されていますので、以下でご紹介します。, 本体 480px + 上padding 10px + 下padding 10px = 500px, paddingが上下10pxずつとborderが上下3pxずつなので、以下のように506pxとなります。, 本体 480px + 上padding 10px + 下padding 10px + 上border 3px + 下border 3px = 506px, outerHeight()の引数にtrueを指定するだけでpaddingとborderに加え、marginまでも含めた高さを取得します。, 上記のようにpaddingとborderとmarginの値を含めた高さが取得できました。, paddingとmarginが上下10pxずつとborderが上下3pxずつなので、以下のように526pxとなります。, 本体 480px + 上padding 10px + 下padding 10px + 上border 3px + 下border 3px + 上margin 10px + 下margin 10px = 526px, 通常innerHeight()と outerHeight()は高さの設定はできないという認識でしたが、試してみると上記のように動作しました。, しかもinnerHeight()はpaddingを除いた値が、 outerHeight()はpaddingとborderを除いた値が設定され、何気に便利ですね。. しかし、私は価値があまりにも低いです。 ビューポートの高さが約850pxの場合、height（）から350または400pxの値が得られます。 どうしたの？, 例： http://jsfiddle.net/forgetcolor/SVqx9/ : http://jsfiddle.net/forgetcolor/SVqx9/, 1つの理由は、あなたが火かぶ/他のものでコンソールをチェックしている可能性があります。 あなたは火の高さのために窓の高さが正しくならないように。, または、Firebugコンソールにputをチェックアウトしたい場合は、ブラウザからデタッチして、結果を確認してください。, JSFiddleは、コードをレンダリングした後に動的にロードされる
