$("body").height();と$("body").css("height");の違い?

このQ&Aのポイント
  • jqueryのメソッドを使用して、body要素の高さを取得する方法には、$("body").height();と$("body").css("height");の2つがあります。
  • $("body").height();は、body要素の高さをピクセル単位で取得します。
  • $("body").css("height");は、body要素の高さをCSSの値として取得します。
回答を見る
  • ベストアンサー

$("body").height();と$("body").css("

$("body").height();と$("body").css("height");の違い? jqueryにてbodyの高さを取得し、その数値に適当な値を足すなり引くなりして、他の要素の高さとして指定するということがやりたかったので $(function() { var bodyheight = $("body").css("height"); var mainheight = bodyheight-230; $("#main").css("height",mainheight); }); とした所、bodyの高さは取得できたのですが、その後が駄目だったので $(function() { var bodyheight = $("body").height(); var mainheight = bodyheight-230; $("#main").height(mainheight); }); と変更したところ、期待通りに動きました。 この2つの違いを、どなたかお分かりになる方にご教授いただきたいです。

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

#1です。ちょっと考えが足らなかった。 css('height')だと読み出しも単位付だから設定の前に演算でNGでしたね。 というか、こういう演算目的のために常にピクセル単位で読み出したり設定できるjQuery.heightやjQuery.widthが用意されているのでしょうね。

otyanoco
質問者

お礼

.css=px付の値 .height=pxを自動補完してくれる といった感じでしょうか。 なるほど、だから演算がうまくいかなかったんですね。 ありがとうございました。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

jQuery.heightで値を設定するときは単位の省略が許される(pxと解釈) 前者でも単位を付けて $("#main").css("height",mainheight+'px'); と、すればよかったんじゃないかな。 試してはないので違ったら失礼。

関連するQ&A

  • CSSでdivのheightを動的に

    DIV要素を作り、その中にテキストを配置しています。これの高さ(height)をCSSで次のようにしたいのですが。どのようにすれば良いでしょうか。 1.文章量が多く、画面外まではみ出したらDIV要素の高さをそれに追従させる。 2.文章が画面内に収まる場合、余ったスペースをDIV要素ですべて埋める。 DIV要素のheightを動的に変化させたいのでpxによる絶対値指定はしません。パーセント指定で100%にしてもうまくいかず、調べてみたところこれは親要素の値に依存するとのことでした。そこで html, body { height: auto; } #main { height: auto; } としてみたところ、1.の「はみ出した場合のサイズ追従」は実現できましたが、2.の「余ったスペースを埋める」ことはできませんでした。逆に html, body { height: 100%; } #main { height: 100%; } にすると2.の「余ったスペースを埋める」ことはできますが1.の「はみ出した場合のサイズ追従」はできません。この両方を実現することってできませんか?

    • 締切済み
    • CSS
  • jQuery height();で高さ取得できない

    jQuery初心者です。 宜しくお願いします。 要素の高さを取得するべく $(セレクタ).height(); としております。 取得したい要素ですが cssでのheightは特に固定値ではなくauto設定です。 (コンテンツの量によって可変させるため) これで、$(セレクタ).height(); を使い要素の高さを取得しましたが、 alertで表示させると0となってしまいます。 最終目標は要素の高さ(複数あり横並びで配置)を取得して、 配列におさめ、最高値をわりだして、 横並びの要素の高さを揃えたいと思っています。 その前に… 各要素の高さが取得できないんです。 何が問題なのかをお分かりになる方、 どうぞご教授下さい 宜しくお願いいたします。

  • 条件式にcssの値を使う方法。

    条件式にcssの値を使う方法。 下記の部分が謎なのですが、プロパティ == 値という形でなぜプロパティの値がnoneだった時となるのでしょうか? if( toolTip.css("display") == "none" ) $(function() { $(".tooltip").each(function(){ var toolTip = $('<div class="tooltip-body">'); var toolTipText = $(this).attr("data-tooltip"); toolTip.html( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide(); $("body").append(toolTip); $(this).hover(function(){ if( toolTip.css("display") == "none" ){ var targetPostion = $(this).offset(); var toolTipHeight = toolTip.height(); toolTip.css({ "position": "absolute", "top": targetPostion.top - toolTipHeight -3 + "px", "left": targetPostion.left + "px", "display":"block", "opacity": "0", "z-index": "9999" }) .stop().animate({ "top" : "-=10px", "opacity": "1" }, 250); } }); }); });

  • jQueryで要素の生のcssを取得する方法

    jQueryの初心者です、宜しくお願い申し上げます。 jQueryのcss(name)で、要素のstyle属性から指定スタイル(name)の値を取得できることは分かったのですが、{ width:50%; }など、比率で指定している属性はpxに変換されて取得されてしまいます。 変換前の%の値を取得する方法はあるのでしょうか? リファレンスを見た所、そのような記述が見当たらなかったため質問させて頂きました。 一応、 var block_style_str = $('.block').attr('style'); var block_style_array = block_style.trim().split(';'); こんな風にすれば、文字列ベースで自由に取得できますが、jQueryらしいスマートな方法があれば教えて頂きたいです。 詳しい方、ご教授の程、何卒、宜しくお願い申し上げます。

  • jQueryで困っています。教えてください。

    スムーススクロールを導入しようと、いろいろ調べて以下のものを参考にさせていただこうと考えています。どうゆう流れになっているのかを調べて分からないことがあったので投稿させていただきました。var target = jQuery(href == "#" || href == "" ? 'html' : href);この行の意味がわかりません。また、targetに何が代入されているのか分かりません。回答よろしくお願いします。 jQuery-------------------------------------------- //スムーズスクロール jQuery(function(){ // #で始まるアンカーをクリックした場合に処理 jQuery('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= jQuery(this).attr("href"); // 移動先を取得 var target = jQuery(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール jQuery('body,html').animate({scrollTop:position}, speed); return false; }); });

  • CSSのセレクタに指定するbodyと*の違い

    CSSでhead要素にstyle要素を記述する際、セレクタにbodyを指定しても*を指定してもすべての要素に適用されますが、違いがあるのでしょうか、教えてください。

    • ベストアンサー
    • HTML
  • cssのtranslateYを変えたい

    知識のある方、教えていただきたいです。 やりたいことは、jqueryでtranslateYにscrollTop - offsetTopを代入するということです。何が間違っているのでしょうか。 $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); headerFix(); function headerFix(){ var $header = $('#tableLayout thead'), offsetTop = $header.offset().top, windowHeight = $(window).height(); $(window).on('load scroll orientationchange resize' , function(){ var scrollTop = $(window).scrollTop(); if (scrollTop >= offsetTop){ $('#tableLayout table thead').css('transform', 'translateY(' + scrollTop - offsetTop + 'px)'); }else{ }; }); }

  • jQueryでheightが指定されていないエレメントを得る方法

    jQueryでheightが指定されていないエレメントを得る方法 javascirptとjQueryを使ってサイトのデザインを変更しようとしています。 その中で「スタイルシートでheigihtが指定されていない」要素を 対象外にするために取り出そうとしていますが、うまくいきません。 $("*").css("height") 又は$("*").height() は、実態の高さを返します。 それが本来的な使い方で、希望しているものが例外的とは理解しています。 何らかの方法が無いかと悩んでいます。 何か方法まはたヒントがございましたら、ご教授ください。 よろしくお願いします。

  • Safariでheight:100%のボックスを表示したいのです

    Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。 以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0

    • ベストアンサー
    • HTML
  • jQueryでheight();を常に取得する方法

    jqueryを使って、divの高さを取得する時、読み込み時に取得されるサイズだけでなく、 リアルタイムに文字サイズの変更等(command+ とか)をすると数字が変更するようにしたいのですが…… どうすればいいのか教えてください。 よろしくお願い致します。 (例:'#stage'の高さを取得する) ---------------------------------------------------------------- $(function(){ var stageHeight = $('#stage').height(); $('#stage').prepend('<p>' + stageHeight + 'px</p>') }); ---------------------------------------------------------------- <body> <div id="stage" class="clearfix body"> <article> <p>hoge hoge hoge hoge hoge hoge</p> <p>hoge hoge hoge hoge hoge hoge</p> <p>hoge hoge hoge hoge hoge hoge</p> </article> </div> </body>