• 締切済み

document.body.scrollTop の数値が正常に取得できない

とあるJavascriptを組んでいるのですが、document.body.scrollTopの値が取得できず困っています。 検証の結果、下記のプログラムだと数値が取得できず、１行目の<!DOC...>を削除すると正常に取得することができます。 スタイルシートを多用している関係で、１行目を削除してしまうと他のレイアウトが崩れてしまうため、これ以外で正常に動かす方法はないでしょうか？ 検証ブラウザ：IE6.0.2900、Firefox 1.52 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>TEST</title> </head> <body> <p>&nbsp;</p> <p>&nbsp;</p> 【中略】 <p>&nbsp;</p> <p><a href="javascript:alert(document.body.scrollTop);">document.body.scrollTopの数値を表示</a></p> </body> </html>

  • Fakes
  • お礼率7% (1/13)

みんなの回答

noname#22259
noname#22259
回答No.2

>>No.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ....> に見えている「?」は「"」です。 Unicodeを使っていますね。ANSIのみ。

Fakes
質問者

補足

回答ありがとうございます。 「正常に取得できた！」と思ったらレイアウトが崩れてしまいました。 スタイルシートの問題も絡んでくるのかもしれませんね。 とりあえず、実証用サンプルを組んでみました。 下記のソースで、DIVの中央寄せとdocument.body.scrollTop の数値取得を同時に達成したいのです。 よろしくお願いします。 <?xml version="1.0" encoding="Shift_Jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>TEST</title> </head> <body> <p>&nbsp;</p> <p>&nbsp;</p> 【中略】 <p>&nbsp;</p> <div style="margin-left:auto; margin-right:auto; width:100px; background-color:#FFFF00"> <p><a href="javascript:alert(document.body.scrollTop);">ALERT</a></p> </div> </body> </html>

noname#22259
noname#22259
回答No.1

× <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○ <?xml version="1.0" encoding="Shift_Jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • DOCTYPE宣言とdocument.body.clientHeight

    お世話になります。 ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。 何か対処法は、御座いませんでしょうか？ 一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると 表示モードが互換になるので・・・。 対応したいブラウザはIE6.0、firefox,Safariです。 一応ソース <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>

  • ブラウザのサイズ取得がXHTMLにするとうまくいか

    http://www.tagindex.com/javascript/user/area.html に ブラウザのサイズ取得のサンプルが載ってます。 <html> <head> <title>TAG index Webサイト</title> </head> <body> <script type="text/javascript"> <!-- if(document.all){ // IE用 document.write('<p>横のサイズ：<strong>' + document.body.clientWidth + '</strong><br>'); document.write('縦のサイズ：<strong>' + document.body.clientHeight + '</strong></p>'); } else{ document.write('<p>横のサイズ：<strong>' + innerWidth + '</strong><br>'); document.write('縦のサイズ：<strong>' + innerHeight + '</strong></p>'); } // --> </script> </body> </html> です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> にすると、IE8で高さが小さな値しかでません。 しかし、紹介したページはただの<html>でないのに、 正しい値が出力されています。 何が足りないのでしょうか。 <p>・・・</p> を２スクロール分入れたら、今度が大きすぎる値が出力されてしまいました。 困っております。どうか助けてください。お願いします。

  • document.locationで変数使用したい

    document.locationに変数の値を使用しようとしたのですが、どうすればできるかわからなかったので、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 なお、下記がサンプルソースとなりますが、js_urlにPHPで取得した値は入っております(alertで確認しました)。 その為、本件はPHPとJavaScriptの連携の問題ではなく、document.location内で変数を使用する際の書き方に問題があると思います(ブラウザ上で確認した所、「'document.location = "http://oshiete.goo.ne.jp/"'」と出力されていれば動作するのではと思いますが、「'document.location = js_url'」と出力されており、変数の中身が展開されていませんでした(シングルクォーテーションで囲まれている為、変数と認識していないと思われますが、どう記述変更すればよいか分かりませんでした))。 【ソースコード】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sample</title> <?php $php_url = "http://oshiete.goo.ne.jp/"; ?> <script type="text/javascript"> window.onload = function() { // setTimeout('document.location = "http://oshiete.goo.ne.jp/"', 2000); var js_url = "<?php echo $php_url; ?>"; alert(js_url); setTimeout('document.location = js_url', 2000); } </script> </head> <body> <p>Sample</p> </body> </html> 以上、よろしくお願いします。

  • JavascriptでObjectからJSON形式変換するにはどうすればいいでしょうか？

    toSourceだと少し違うし、どうすればいいのでしょうか。簡単に変換できる関数でもあればいいのですが、わかりませんでした。 どなたかご教授お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>objctからJSONに変換</title> <script type="text/javascript"> obj = new Object(); obj.test = "txt"; str = obj.toSource(); document.write(str); //--> </script> </head> <body> </body> </html>

  • コールバック関数が上手くいかないです

    こんにちは。 ブラウザ上に70と表示させるため、以下のソースを書きましたがうまくいきません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function funcA(a) { alert(a + 10); } function funcB(b, func) { var x = b + 2; func(x); } function funcC(c){ var body = document.body; body.innerHTML = c * 10; } funcB(5,funcC); //]]> </script> </head> <body> </body> </html> どなたか詳しい方、ご教示お願いいたします。

  • スクロールメニューが宣言を入れるとIEだけでしか動作しないので、困っています。

    サイドメニューバーをスクールに合わせて動く、スクリプトを使っていますが、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">を入れると、 IEでしか、動きません。 また、上記の宣言を抜くと、IE以外では動きますが、 IEでのCSS表示が崩れてしまいます。 原因を教えてください。 使用しているスクリプトは下記です。 <script type="text/javascript"> var timer window.onload = scrolltop; window.onunload = stoptimer; function scrolltop() { var menu = document.getElementById('scrollmenu'); var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; menu.style.top = scrollTop; timer = setTimeout("scrolltop()",10); } function stoptimer() { clearTimeout(timer) } </script> 何卒、宜しくお願いします。

  • window.close()で閉じられない

    教えていただけますか？ インターネット上のサンプルを参考に 押したらウインドウを閉じるボタンを作ったのですが、 うまく機能しません。 サーバーはレンタルサーバーです どの様にしたら良いでしょうか？ インターネット上のサンプルでは閉じられました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <form> <INPUT type="button" value="閉じる" onClick="window.close()"> <input type="button" value="閉じる" onClick="close()"> </form> <A href="JavaScript:window.close()">閉じる</A> </body> </html>

  • XHTML のタイトルが表示されません　ご教授おね

    タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像） 　 一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>

    • ベストアンサー
    • CSS
  • require_onceで意図したエラーがでない

    初心者です。教えていただけますか？ さくらのレンタルサーバで http://www.sakura.ne.jp/ 存在しないphpファイルをrequire_onceで読み込んだのですがエラーが出ません。 他の無料レンタルサーバーで全く同じファイルをブラウザで開いたら意図した通りにエラーが出ました。 抑制されているのでしょうか？ エラーが出る様にするにはどうすれば、良いですか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <?php require_once("xxxxx.php"); ?> </body> </html>

    • ベストアンサー
    • PHP
  • ホームページの上下の隙間を消すには

    左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する