14

ユーザーのクライアントの幅を考慮して、ページの幅を変更するスクリプトを作成しようとしています。これは次のようなものです。

function adjustWidth() { 
    width = 0;
    if (window.innerHeight) {
        width = window.innerWidth;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        width = document.documentElement.clientWidth;
    } else if (document.body) {
        width = document.body.clientWidth;
    }
    if (width < 1152) {
        document.getElementsByTagName("body").style.width="950px";
    }
    if (width >= 1152) {
        document.getElementsByTagName("body").style.width="1075px";
    }
}
window.onresize = function() {
    adjustWidth();
};
window.onload = function() {
    adjustWidth();
};

このスクリプトを使用すると、Firebugからエラーが発生します。

document.getElementsByTagName("body").style is undefined

今私の質問は、どうすれば体のスタイルにアクセスできますか？cssシートでは、セレクターと幅のプロパティが定義されているためです。

4

5 に答える 5

30

この関数は、ノードが1つしかない場合でも、ノードのリストを返します<body>。

document.getElementsByTagName("body")[0].style = ...

そうは言っても、JavaScriptの代わりにCSSを使用してこれを行うことを検討することをお勧めします。CSSメディアクエリを使用すると、次のような調整を行うことができます。

@media screen and (max-width: 1151px) {
  body { width: 950px; }
}
@media screen and (min-width: 1152px) {
  body { width: 1075px; }
}

メディアクエリは、IE9および他のほとんどすべての最新のブラウザで機能します。IE8の場合、JavaScriptにフォールバックするか、本文をビューポート幅の100％などにすることができます。

于 2012-07-30T12:25:33.107 に答える
11 
document.getElementsByTagName("body")[0].style
于 2012-07-30T12:27:22.937 に答える
8 
document.getElementsByTagName('body')[0].style = 'your code';

例：

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';
于 2017-09-19T04:39:16.097 に答える
4

getElementsByTagNameノードの配列を返すため、[]要素にアクセスするにはを使用する必要があります。

試すdocument.getElementsByTagName("body")[0].style

于 2012-07-30T12:25:44.933 に答える
3

document.getElementsByTagName("body")私はあなたが戻ってくるのはだと信じていますHTMLCollection。あなたはあなたが望むものを手に入れるために使うことができるはずdocument.getElementsByTagName("body")[0].styleです。

于 2012-07-30T12:31:53.383 に答える