alert(w); 結果(コンソール) 480. 変更点4では、remove対象を$dammyWrapperにしています。 ② その中にtestTextというクラス名のspan要素を作る。 ちょっとでもそれらが入っていると余計に大きく幅が取られてしまい、全然駄目駄目に。 $(function(){ 変更点1と変更点2では、class名の追加をしています。 横幅といってもborderを含んだりpaddingの内側だったりとさまざまな取得方法があります。, 上図の赤字がメソッドですが、要素のどの部分を取得するかでそれぞれ用意されていますので、以下でご紹介します。, 本体 780px + 左padding 10px + 右padding 10px = 800px, paddingが左右10pxずつとborderが左右3pxずつなので、以下のように806pxとなります。, 本体 780px + 左padding 10px + 右padding 10px + 左border 3px + 右border 3px = 806px, outerWidth()の引数にtrueを指定するだけでpaddingとborderに加え、marginまでも含めた幅を取得します。, 上記のようにpaddingとborderとmarginの値を含めた横幅が取得できました。, paddingとmarginが左右10pxずつとborderが左右3pxずつなので、以下のように826pxとなります。, 本体 780px + 左padding 10px + 右padding 10px + 左border 3px + 右border 3px + 左margin 10px + 右margin 10px = 826px, 先ほどご紹介したwidth()innerWidth()outerWidth()ではブラウザのスクロールバーを除外した横幅しか取得されません。, javascriptのwindow.innerWidthを使えばスクロールバーを含めた横幅を取得できます。, 通常、innerWidth()とouterWidth()は幅の設定はできないという認識でしたが、試してみると上記のように動作しました。, しかもinnerWidth()はpaddingを除いた値が、 outerWidth()はpaddingとborderを除いた値が設定され、何気に便利ですね。. 上記のようにpaddingの内側の高さが取得できました。. ⑤ このままでは要素作りっぱなしになっちゃうので、testAreaを削除する。 var w = $('div .classname').width(); としても、正しいあたいは取得できない。 jQueryで画像やボックスの高さ・幅がうまく取得できない時には、最初にこの取得するタイミングはどこになっているのかをチェックすると解決する事がよくある。 先日Web案件で、文字列の幅を取得してwidthに設定したい場面がありました。 しかし、その文字列はjQueryで動的に生成していたため単純なwidth();などでは取得できず…。 結局2通り方法を試して、2つ目の方法でやっと上手くいったのでした。 jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。 何とかなったので、解決方法 … jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。 下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。 jQuery逆引きリファレンス。任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明する。   結局2通り方法を試して、2つ目の方法でやっと上手くいったのでした。 $(‘#target’).bind(‘load’, function(){ もしかしたら今回の文字列が取得できなかった問題も、もっとスマートな方法があったかもしれません。 私は隠されているdivの中にある要素の高さを取得する必要があります。 今はdivを表示し、高さを取得し、親divを非表示にします。 これはちょっとばかげたようです。 より良い方法がありますか? 私はjQuery 1.4.2を使用しています:   CSSの指定一つとってもブラウザ毎に様々な解釈があったりして表示がズレにズレたり…。 何はともあれ、これで文字列の幅が綺麗に取れました。, Webサイト制作って何が大変かって、クロスブラウザ対応ですよね。 jQueryが動かない時に確認する9項目 1)スクリプトエラー. 変更点5では、returnを単にwidthとしています。 jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。, 下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。IEやFirefoxでは想定通りに動きますが、Google Chromeでは想定通りに動きません。, [javascript]     jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。 下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。 コンソールについては下記ページでご紹介しています。 参考:jQueryでコンソールログを使ったデバッグ方法 innerHeight() でborderの内側を取得 ⑥ returnで④で定義したwidthを返す。 ④ 書き出した後で、testTextの幅を取得し、widthという名前で定義する。 PHPMailer の SMTP connect() failed. jQueryで要素が非表示になっているかどうかを確認するにはどうすればよいですか. 先日Web案件で、文字列の幅を取得してwidthに設定したい場面がありました。 var w = $(‘#target’).css(‘width’); こんにちは!先日健康診断で脂肪肝と診断された橋浦です! jQueryで割と多く使われるのはcssメソッドではないでしょうか? $( ".hoge" ).css( "width" , "100px" ); jQueryの使用動機は、cssの編集に起因する事が多いと思います。@MINOも最初はcssをいじりたいからjQueryを勉強し始めました。   ブラウザの表示領域を取得するのに$('html').attr('clientWidth')という方法を使っていたのですが、jQuery 1.4.2 から jQuery 1.6.2 にしたら undefined で使えなくなっていました。この方法は非推奨になってしまったのでしょうか?Windo 確かにこの方法でピッタリ幅になっている文字列もありました。 //width値を取得を取得する var div_width = $( ".hoge" ).css( "width" ); この方法でwidth値を取得した場合、数値に "px" が付いてきます。 その為、素直に数値として使うことができないです。 © Copyright 2020 flatFlag. jQuery では、$(window).width(); でウィンドウ幅、$(window).height();でウィンドウ高さが値として取得できますが、一部のブラウザで値が正確に取れないことがあるようです。, こんなかんじですが、一部のブラウザではスクロールバーの有り無しを間違えて、その分を加味した結果を返してくるようです。もしかしたら、もっととんでもないロジックなのかもしれませんが… 変更点3は削除のみしていますが、これでは当然意図した幅を取得できません。 みかづきブログ その3 jqueryで動的につくったテキストの幅を取得する, 何をしてるかというと、 ちなみにheight()はpxなどの単位は除外され、整数で取得されます。. », ©2012 Gworks Web Site, Copyright Gworks All rights reserved.   ピッタリ幅を取るためには、違う方法を考える必要がありました。, この方法はこのサイト様を参考にさせて頂きました。 jQuery逆引きリファレンス。任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説 … なら、文字数を取得して、その数を幅にしちゃえばいいじゃないッ!!!!! この場合は、すべて返り値が「undefined」になるので位置を取得することができなくなります。 特に、jQueryで要素を意図的に追加・削除する場合は、存在しない要素の位置を取得することがあるので注意しましょう! 座標の位置が正しく取得できない理由. 変更点3では、CSSのfontの指定を削除。 今回は、せっかくなのでその方法を紹介してみたいと思います。, プログラミングに関してチンパンジー並の経験と知識しかない僕が浅知恵を絞って最初に思いついた方法です。 IE以外のブラウザではちゃんとjs側のfunction getWidth()の中でしているフォント指定が効いているのですが、なぜかIEでは効かないのでCSSファイルの方に記述しました。ほんとIE様カンベンして。 [/javascript], キーの入力だけで目的のタブに素早く切り替えられる Google Chrome 拡張つくりました, [jQuery]ajaxメソッドをループを使って繰り返す場合はeachを使うとうまくいく, [Javascript]オブジェクトの中身を簡単にdumpしたい場合はFirebugのコンソールでconsole.logを使う. [/javascript], jQueryの$()はDOMの読み込みが完了後に実行されるはずですが、画像の読み込みについては別なようなのです。ですが、jQueryのbindメソッドを使うことで画像の読み込みを待つことができます。, [javascript] 変更点に対する変更内容は以下のようになっております。 コンソールについては下記ページでご紹介しています。 参考:jQueryでコンソールログを使ったデバッグ方法 innerWidth() でborderの内側を取得 alert(w); jQuery:jQueryの隠し要素の高さを取得する (10) . そこで、元々のjavascriptが持っているコマンド、innerWidthとinnerHeightを使って値を取得することにすします。, こうすると、リロードしても、ウィンドウ幅の判定に支障がないようです。if文にしたのは値が取れなかった時の保険です。, と、ここまで書いてブラウザでもうまく行ったようなのですが、jQueryの公式ドキュメントを見てみるとちょっと私の理解は違うみたい。, 要素の幅を測定するのが、$().width()で、ボーダーの幅までを測定するのが、$().innerWidth/Height() とのことらしいけれど、ウィンドウとドキュメントのオブジェクトに適用可能ではないようなので、素直にwindow.innerWidth/Heightとしておいたほうがいいのかもしれません… パディングのデフォルト値をブラウザが持っていて、それをリセット出来ていないと値が変わるという考えがいいのかも?, 今の私の環境では全て同じ値でした。まぁウィンドウの高さか幅めいいっぱいに画像をレスポンシブに貼る必要が出てきて、html5 CSS3 は使わずに jQuery でやってみたとき、値が違ったりしたら、確認に使えることを期待して。違う環境に遭遇した時の確認用に晒しておきます。, « Google Group リスト 取得方法 ① testAreaというクラス名のdiv要素を新たに作る。 jQueryが動かないほとんどの原因は、記述ミスによるスクリプトエラーだと思います。 ブラウザ標準、またはプラグインで使えるコンソール機能を利用してエラー原因をチェックしましょう Chromeの場合 ちなみにwidth()はpxなどの単位は除外され、整数で取得されます。. // window.innerWidthでブラウザのスクロールバーも含めて横幅を取得し、変数に格納, jQueryで要素を追加するいくつかの方法〜append,prepend,before,after,wrapなど. All rights reserved. });   ということで書いたソースがこちら。, 取得した文字数に単位”em”をつけてそのまんま幅にしちゃってます。   コーダー道は続くよどこまでも。これからもIE様に悩まされながら精進していきたいと思います。 私は隠されているdivの中にある要素の高さを取得する必要があります。 今はdivを表示し、高さを取得し、親divを非表示にします。 これはちょっとばかげたようです。 より良い方法がありますか?, 1つの回避策は、高さを取得する要素の外側に親divを作成し、高さを '0'にしてオーバーフローを非表示にすることです。 次に、子要素の高さをとり、親のオーバーフロープロパティを削除します。, Nick Craverのソリューションに続いて、要素の可視性を設定することで正確な寸法を得ることができます。 私はこのソリューションを非常に頻繁に使用しました。 しかし、手動でスタイルをリセットしなければならないので、私はCSSの要素の初期位置/表示を開発を通じて変更すると、これは面倒なことに気付きました。私はしばしば関連するJavaScriptコードを更新することを忘れてしまいます。 次のコードでは、sayごとのスタイルはリセットされませんが、javascriptによって追加されたインラインスタイルは削除されます。, ここでの唯一の仮定は、他のインラインスタイルが存在しないことです。そうでなければ、それらも削除されます。 しかし、ここでの利点は、要素のスタイルがCSSスタイルシートのスタイルに戻されることです。 結果として、要素を渡し、高さまたは幅が返される関数としてこれを書くことができます。, 私がjs経由でスタイルをインラインに設定する際に気づいた別の問題は、css3によるトランジションを扱うときに、スタイルルールのウェイトをインラインスタイルよりも強くすることが強制されることです。, 要素がvisibility cssスタイルを設定して非表示になっている場合、エレメントが表示されているかどうかにかかわらず、高さを取得できるはずです 。, 表示cssスタイルを "none"に変更して要素が非表示になっている場合、要素はページ上にスペースをとらないため、表示スタイルを指定する必要があります。どのポイント、あなたは高さを得ることができます。, ここでは、非表示の親の子孫でさえ、隠し要素のjQueryの次元メソッドをすべて処理するために書いたスクリプトです。 もちろん、これを使用してパフォーマンスが低下します。, CSS属性を設定すると、インラインで挿入され、CSSファイル内にある他の属性を上書きします。 HTML要素のstyle属性を削除すると、最初は隠されていたので、すべてが元に戻って隠されています。, ユーザーのNickの回答とJSBinのユーザーhitautodestructのプラグインをさらに作成して、幅と高さの両方を取得し、これらの値を含むオブジェクトを返す同様のjQueryプラグインを作成しました。, ここで見つけることができます: http://jsbin.com/ikogez/3/ : http://jsbin.com/ikogez/3/, 私はこの小さな小さなプラグインを完全に再設計しました。以前のバージョン(上記)は、DOMの操作が多く発生していた実際の環境では実際には使用できませんでした。, 既にページに要素を表示している場合は、要素が非表示になっても設定されているため、DOM要素(.get(0)でjQueryで到達可能)から直接高さを取ることができます。, 私の状況では、私は高さの値を得るのを止める隠された要素も持っていましたが、それは要素そのものではなく、むしろ親の1つでした...だから私はプラグインの1つをチェックして隠されていなければ、最も近い隠された要素を見つける。 ここに例があります:, 実際、これはNick、GregoryとEyelidlessnessの合併であり、Gregoryの改良されたメソッドを使用するようになっていますが、スタイル属性に何か置き換えたいものがあると思われる場合は両方のメソッドを使用し、親要素。, 私は隠された要素の幅を取得するのと同じ問題に遭遇したので、私はこのプラグインをjQuery Actualで修正するために書きました。 使用する代わりに, 私は隠れ要素のために働く機能を見つけようとしますが、CSSはみんなが考えるよりもはるかに複雑であることを認識しています。 複雑な親要素内のフレキシブルなボックス、グリッド、カラム、さらには要素のような以前のすべての答えにはうまくいかない、新しいレイアウトテクニックがCSS3にたくさんあります。, 唯一の持続可能でシンプルなソリューションはリアルタイムレンダリングだと私は思っています 。 その時、ブラウザはあなたに正しい要素サイズを与えるべきです。, 残念なことに、JavaScriptは、要素が表示されているか隠されているかを通知する直接イベントを提供しません。 しかし、要素の可視性が変更されたときにコールバック関数を実行するDOM Attribute Modified APIに基づいていくつかの関数を作成します。, https://github.com/Soul-Master/visible.event.js, デモ: http://jsbin.com/ETiGIre/7 : http://jsbin.com/ETiGIre/7. }); 結果(コンソール) 780. paddingの内側の横幅が取得できました。. しかし、その文字列はjQueryで動的に生成していたため単純なwidth();などでは取得できず…。 なので、CSSに以下の記述を追加してください。, なぜわざわざfontの指定をCSSファイルの中に変更したかというと、こちらIE対策になっております。 ですがこの方法、小文字や数字、記号のことは全く考えられておりません…。 }); $(function(){ では皆様、また会う日まで!, // forked from kimmy's "テキストの長さを計測する(仮)" http://jsdo.it/kimmy/61Uq, 'おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。おっしゃ。れっつ。世界征服。', Talend Open StudioでExcelデータをかき集める(実装編その2) ». 1つの回避策は、高さを取得する要素の外側に親divを作成し、高さを '0'にしてオーバーフローを非表示にすることです。 var w = $(‘#target’).css(‘width’); 任意の要素に対して幅/高さを設定/取得する方法を解説。また、height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの使い分け方法も説明する。, 要素の幅/高さを設定するには、height/widthメソッドを利用します。cssメソッドでheight/widthスタイルプロパティを設定することもできますが、まずは専用メソッドであるheight/widthメソッドを利用するのが簡便です。, height/widthメソッドで引数を省略した場合には、要素の現在の高さ/幅を取得できます。高さ/幅を取得するメソッドは、height/widthメソッドの他にも、innerHeight/innerWidth、outerHeight/outerWidthメソッドがありますので、併せて例示しておきます。, height/width、innerHeight/innerWidth、outerHeight/outerWidthメソッドの違いは、, 以下に、それぞれのメソッドが示す範囲を、図でも示しておきます。outerHeight/outerWidthメソッドは、引数を指定するかどうかによって、得られる値が変わる点にも注意してください。, innerHeight/innerWidth、outerHeight/outerWidthメソッドは、いずれも値を取得するためのメソッドで、値を設定することはできません(設定できるのはheight/widthメソッドだけです)。, ※以下では、本稿の前後を合わせて5回分(第7回~第11回)のみ表示しています。 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。, 任意の要素の、任意の属性に対して値を設定/取得する方法を解説。また、複数の属性をまとめて設定する方法も説明する。, 任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。, $.isXxxxxメソッドを使って、変数のデータ型を判定する方法を解説。また、$.typeメソッドを使って、引数で指定されたオブジェクトの型を文字列として返す方法も解説する。, $.eachメソッドを使って、配列やオブジェクトの内容を順に処理する方法を解説。またJavaScriptのevery/someメソッドを、jQueryの$.eachで代替する方法も説明する。, "http://www.wings.msn.to/image/wings.jpg", "http://code.jquery.com/jquery-1.11.1.min.js", ONLINE SITE 最新情報: 人気記事ランキング Top 100 [5年間], C#による.NET Core入門(6): .NET CoreライブラリプロジェクトをパッケージングしてNuGetサーバーに発行する, 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth), .NET Coreとは? 開発環境(SDKとVisual Studio Code)のインストール, jQuery: 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth), jQuery: id値/タグ名/クラス名で特定の要素を取り出すには? ― 基本セレクター, 機械学習 開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。.