0

体の背景画像を使用するサイトがあります。ブラウザがリサイズされたらボディクラスを変更したい。

JavaScript:

function MOSTRA() {
   var SCR = screen.availWidth
   var BRW = window.outerWidth

   if BRW < SCR {
      document.getElementById(BODY).className = 'BDYL'
   }
   else { 
      document.getElementById(BODY).className = 'BDNL' 
   }
}

HTML:

<body id="BODY" class="BDNL" onResize="MOSTRA()">

クラスが (Background-size:auto のクラスに) 変更されると思っていましたが、そうではありません。背景のサイズまたはクラス全体を変更するにはどうすればよいですか? Javascript、HTML、または CSS しか使用できません。

4

5 に答える 5

4

ステートメントの条件を括弧ifで囲み、文字列をアポストロフィ (または引用符) で囲む必要がありますBODY。

また、行をセミコロンで区切る必要があります。ステートメントが行で終了できる場合、スクリプト パーサーは行末にそれらを自動的に追加しますが、パーサーがセミコロンを自動的に追加できないように終了括弧を忘れると、予期しないエラー メッセージが表示される場合があります。

onloadページがロードされたときにクラスが設定されるように、ボディのイベントから関数を呼び出すこともできます。

function MOSTRA() {

  var SCR = screen.availWidth;

  var BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.getElementById('BODY').className = 'BDYL';
  } else {
    document.getElementById('BODY').className = 'BDNL';
  }
}

デモ: http://jsfiddle.net/Guffa/q56WM/

于 2012-07-11T22:23:41.650 に答える
1

これは機能します：

<script type="text/javascript">
window.onload = function () {
  window.onresize = function (evt) {
    var width = window.innerWidth || 
     (window.document.documentElement.clientWidth || window.document.body.clientWidth);

    if (width < screen.width)
    {
        document.body.className = 'BDYL';
    }
    else
    {
        document.body.className = 'BDNL';
    }

  }
};
</script>
于 2012-07-11T22:31:50.533 に答える
1

あなたが実際に何を達成しようとしているのか正確にはわかりませんが（あなたが取り組んでいるページへのリンクが役立つでしょう）、次のことが頭に浮かびました：

  • 柔軟なレイアウト手法 (CSS でコンテナーの寸法にパーセント値を使用する) を使用して、DIV 要素が視聴者の画面解像度に対して相対的にレンダリングされるようにすることをお勧めします (読み取り: 親の寸法 - 親 DIV 要素または body 要素のいずれか)。これは 100% の幅になり、ページで利用可能な幅を表します。

    div {width:60%}

  • 背景画像を実装する方法についてもう一度考えてみてください。ページ上の要素を背景画像に揃える必要がある場合は、背景画像を設定しないでくださいbackground-size:contain。代わりに、背景を部分にスライスし、その結果の小さな画像をページのさまざまな部分に割り当てます。

  • さまざまな解像度向けに設計する場合に関連:メディア クエリとレスポンシブ レイアウト。

  • jQuery resize()を確認することをお勧めします。jQuery は、サイズ変更イベントのさまざまなブラウザー実装を処理します。

    $(window).resize(function() {
    $('body').prepend('<div>' + $(window).width() + '</div>');
});

    また、これにより、 jQuery Events Systemを使用して JavaScript をよりエレガントに実装できるようになります。もちろん、これは、ページでさらに JavaScript の作業が計画されている場合にのみ関連します。私は実際には完成のためにこれを参照しているだけです。

  • 投稿したコードは無効です。

    • 行末のセミコロンがありませんでした (ただし、コードは機能している可能性があります。通常、インタープリターはそれをうまく推測するからです)。
    • body 要素で ID を使用する必要はありませんdocument.getElementsByTagName()。
    • タグ名 (BODY) を引用符で囲む必要があります。
    • if else ステートメントの条件を括弧で囲みます。

    コードは次のようになります。

    function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.getElementsByTagName('BODY').className = 'BDYL';
    } else { 
        document.getElementsByTagName('BODY').className = 'BDNL';
    }
}

    または、MaxArtが指摘したように、単に使用しますdocument.body

    function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.body.className = 'BDYL';
    } else { 
        document.body.className = 'BDNL';
    }
}

これらすべてが役に立たない場合は、ご容赦ください。私は本当にあなたの問題が何であるかを推測することしかできませんでした. 前述のように、問題のページへのリンクが役立ちます。

また、あなたの質問は、あなたがこれらすべてに慣れていないという印象を与えました。そうでない場合は、とりとめのないことをお許しください。

于 2012-07-11T22:49:21.813 に答える
0

コードに構文エラーがあります。に文字列を渡していませんgetElementById()。

これ：

document.getElementById(BODY).className = 'BDYL'

これにする必要があります（文字列にするために引用符を付けます）：

document.getElementById("BODY").className = 'BDYL'

アップデート：

または、MaxArt がコメントで指摘しているように、document.body.className = "BDYL"

更新 2:

Mikahil が指摘したように、if ステートメントにも構文エラーがあるため、関数は次のようになります。

function MOSTRA() {

  var SCR = screen.availWidth,
      BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.body.className = 'BDYL';
  } else {
    document.body.className = 'BDNL'; 
  }
}
于 2012-07-11T22:22:20.730 に答える
0

これに JavaScript を使用する必要がある理由がわかりません。

CSS:

body {
     position: relative;
     width: 100%;
}
于 2012-07-11T22:22:26.843 に答える