- ベストアンサー
jQueryで要素の高さ取得ができない問題について
kamepanmanの回答
- kamepanman
- ベストアンサー率43% (19/44)
関連するQ&A
- javascriptで高さの取得ができない
cssで#A{height=auto;} としている"A"の高さを取得するため/bodyの手前に alert(document.getElementsByID("A").style.height); といれてみますが、取得できません。 cssで#A{height=1000px;}とすればalertに1000pxが返ってきます。 なぜでしょうか。Aの高さを取得することは不可能なのでしょうか。
- ベストアンサー
- JavaScript
- jQueryでheightが指定されていないエレメントを得る方法
jQueryでheightが指定されていないエレメントを得る方法 javascirptとjQueryを使ってサイトのデザインを変更しようとしています。 その中で「スタイルシートでheigihtが指定されていない」要素を 対象外にするために取り出そうとしていますが、うまくいきません。 $("*").css("height") 又は$("*").height() は、実態の高さを返します。 それが本来的な使い方で、希望しているものが例外的とは理解しています。 何らかの方法が無いかと悩んでいます。 何か方法まはたヒントがございましたら、ご教授ください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 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で要素がない場合
貴重なスペースをお借りして質問させていただきます。 jqueryについてご質問させていただきます。 例えば下記のような記述があるとします。 var hogeheight = $('#contents1').height() + $('#contents2').height() + $('#contents3').height(); 上記のhogeheightの値を使ってなにかするとします。 このjsをいろいろなところで使用したいのですが、ページによっては#contents1と#contents3しかなかったり、#contents2と#contents3しかなかったりしますが、その場合はやはり要素がなかったら値を0にするような記述をすべきでしょうか。。 実際にやってみたところ、問題なく動いていて、consoleをみてもエラーは出ませんが、実際には取得しようとするので重くなってしまうとはおもうのですが。。 すみませんよろしくお願い申し上げます。
- ベストアンサー
- JavaScript
- 【jQuery】要素を合わせた横幅の取得について
現在、要素が横並びになった横スクロールのサイトを作成中です。 各コンテンツ要素のsectionの横幅は固定ではなく、 縦幅に合わせて可変するようにしています。 htmlは以下のようにしています。 <div id="wrap"> <div id="header"> <ul><li></li></ul> </div> <div id="secWrap"> <div class="section"> ここに内容 </div> <div class="section"> ここに内容 </div> </div> </div> wrapにsectionの幅を足した合計の横幅（px）を加えたいのですが、 正しいサイズを取得できず、sectionがカラム落ちしてしまいます。 以下のjsの何かが間違っているのでしょうか？ それともCSSなどで何かしらの指定が必要なのでしょうか。 お分かりの方がおられましたらご教授頂けたら幸いです。 ■javascript $(function(){ function adjust(){ var h = $(window).height(); var h1= $('#header').height(); $('.section').css('height', h-h1); var cont = $('.wrap');//コンテンツの横サイズ var contW = $('.section').outerWidth(true) * $('div',cont ).length; cont.css('width', contW); var speed = 50; $('html').mousewheel(function(event, mov) { $(this).scrollLeft($(this).scrollLeft() - mov * speed); $('body').scrollLeft($('body').scrollLeft() - mov * speed); return false; }); } adjust(); $(window).on('resize', function(){ adjust(); }) }); ■CSS body { height: 100%; overflow-y: hidden;} html{height: 100%; } #header{ position: fixed; height: 50px; left: 0px; top: 0px;} .wrap{ top: 50px; position:absolute; height:100%; } .section { float:left; }
- ベストアンサー
- JavaScript
- CSSで左右マージンをautoにすると、heightのautoが効かなくなるのですが・・・
CSSで左右マージンをautoにすると、heightのautoが効かなくなります。私の場合、まず、bodyタグに対してマージン0とテキスト中央ぞろえを行い、その後大枠の「wrapper」divで800×600位を設定し、 中にコンテンツ要素を挿入した後、大枠の「wrapper」のheightをautoに設定しなおします。すると、コンテンツ要素が大枠の「wrapper」から飛び出し、大変なことになってしまいます。しかしながら、大枠の「wrapper」にフロート設定をすると、heightのautoが機能します。 宣言文を変えてみても同じ現象が発生しますが、どなたかこの問題に関して、左右のautoで中央揃えにし、heightのautoでコンテンツを追加しても「wrapper」がきちんと伸びていく設定を共存させる手法をご存知の方がいらっしゃいましたら、ご教授願えますと幸いです。 宜しくお願いします。
- ベストアンサー
- HTML
- $("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); }); と変更したところ、期待通りに動きました。 この２つの違いを、どなたかお分かりになる方にご教授いただきたいです。
- ベストアンサー
- JavaScript
- パララックスのheight100%
宜しくお願いします。初心者な質問ですみません； 紙芝居風のjqueryでトップページ（扉風）がパカっと割れて、 下のページがでてくるようにしたいのですが、 トップページのみheight100%で、 下に表示されるコンテンツページは内容をスクロールして見ることは、 不可能なんでしょうか？ height100％だと、スクロールできないということなんですよね？ よろしくお願いしますm（＝＝）m Fullscreen Slit Slider with jQuery and CSS3 http://coliss.com/articles/build-websites/operation/work/tutorial-fullscreen-slit-slider-by-codrops.html 【CSS】ボックスを［height:100%;］で画面全体に表示させる方法。 http://on-ze.com/archives/1431
- 締切済み
- CSS
- JQueryのセレクタ
jqueryでセレクタの取得をしたいのですがうまくいきません div要素の中のspan要素を取得したいのですがclassで取得すると重いのでid属性で場所を限定してからclass属性で絞り込みたいです こんな感じにしたらだめでした $("#hoge.foo").html('ほげ'); html <div id=hoge> <span class=foo></span> </div>
- ベストアンサー
- JavaScript
- jQueryで配列の値をidのセレクタに使う方法
以下のようなjQueryのソースで、配列Xに入れた文字列A,B,Cがidの要素について、配列を介さずにCSSでcolorをredにしようとしたとき、そのまま書けば、『$('#A, #B, #C').css('color', 'red');』だと思うのですが、配列X[0],X[1],X[2]の表記を利用して、セレクタを指定するにはどうすればよいでしょうか。 具体的には、 『$('#'+X[0]).css('color', 'red'); $('#'+X[1]).css('color', 'red'); $('#'+X[2]).css('color', 'red');』 というコードを、cssを3回指定せずに、1回で済ませたいということです。 [jQueryソース] $(function(){ <p id='A'>1</p> <p id='B'>2</p> <p id='C'>3</p> X = []; X[0] = 'A'; X[1] = 'B'; X[2] = 'C'; $('#A, #B, #C').css('color', 'red'); });
- ベストアンサー
- JavaScript
お礼
ありがとうございます。 プラグインを使うのが手っとり早く、 プラグインを使うと、希望通りに実行できるのですが、 出来るだけ軽くしたい、っていうのと、その他もろもろの理由があり、 プラグインを使わず自分で書きたいと考えております。 ですが、自分で書こうとしている前に、 そもそも高さを取得できず…困っておりました。 でも教えていただいたプラグインは使えますね。 何かの際に、参考にさせていただきます。 ありがとうございました。