JavaScriptを使用してボディタグスタイルを変更する

私は、ユーザーのクライアントの幅を考慮して、ページの幅を変更するスクリプトを作成しようとしています。それはこのようなものです：このスクリプトではJavaScriptを使用してボディタグスタイルを変更する

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シートではselectorとwidthプロパティが定義されています。

出典

2012-07-30 Nojan

試し** 'getComputedStyle（要素）[スタイル]' **と例** 'window.getComputedStyleが（document.body）.width' ** .. 。learn http://javascript.info/tutorial/styles-and-classes-getcomputedstyle – KingRider

<body>が1つのみであっても、この関数はノードのリストを返します。

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-30 12:25:33 Pointy

ありがとう。私はクロスブラウザーの問題について心配すべきですか？ – Nojan

@NOjANよくIE8以前はメディアクエリをサポートしていません。それ以外の場合は、iOSやAndroidなどでもかなりうまくサポートされています。 – Pointy

** getElementsByTagName **は他のブラウザのバグとして存在します** 'document.body' ** – KingRider

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

は

出典

2012-07-30 12:25:44

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

出典

2012-07-30 12:27:22 voodoo417

' document.getElementsByTagName（ "body"）の代わりに常に 'document.body'を使用してください[0]' –

document.getElementsByTagName("body")[0].styleは、私はあなたがdocument.getElementsByTagName("body")がHTMLCollectionあるから戻って得るものと信じて試してみてください。あなたはあなたが望むものを得るためにdocument.getElementsByTagName("body")[0].styleを使用できるはずです。

出典

2012-07-30 12:31:53

document.getElementsByTagName('body')[0].style = 'your code';

例：。

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';

出典

2017-09-19 04:39:16

JavaScriptを使用してボディタグスタイルを変更する

答えて

関連する問題