1

OSがMACの場合、変数を設定し、条件に応じてbodyタグに新しいクラスを追加します。これが私のコードです

<script type="text/javascript" language="javascript">
var mac=0;
    if(navigator.userAgent.indexOf('Mac') > 0){
        mac=1;
    }else{
        mac=0;
    }

if(1==mac){
    //document.body.className+='mac-os';
    //document.getElementsByTagName('body')[0].className+='mac-os';
    $('body').addClass('mac-os');
}else{
    //document.body.className+='win-os';
    //document.getElementsByTagName('body').className+='win-os';
    //$('body').addClass('mac-os');
    //$("body.className").addClass('win-os');
    //document.body.className += " " + 'win-os';
    $("body").addClass('win-os');
}
</script>

私はすべてを試しましたが失敗しました。

4

5 に答える 5

4

body現在のコードが実行されている時点で要素が存在しない可能性があります。

readyコードをハンドラー内に配置することで、DOM の準備が整うまでコードが実行されないようにします。

$(document).ready(function() {
    // your code
    ...
});

要素内<body>、通常はページの最後に配置しても機能します。

于 2013-07-23T07:11:28.487 に答える
2

スクリプトが頭にある場合は、bodyロードされるまで待つ必要があります。コードを次のように変更します。

$(document).ready(function(){
var mac=0;
    if(navigator.userAgent.indexOf('Mac') > 0){
        mac=1;
    }else{
        mac=0;
    }

if(1==mac){
    //document.body.className+='mac-os';
    //document.getElementsByTagName('body')[0].className+='mac-os';
    $('body').addClass('mac-os');
}else{
    //document.body.className+='win-os';
    //document.getElementsByTagName('body').className+='win-os';
    //$('body').addClass('mac-os');
    //$("body.className").addClass('win-os');
    //document.body.className += " " + 'win-os';
    $("body").addClass('win-os');
}
});

または、スクリプトを body タグに入れます。

<body>
<!-- your script -->
<!-- others -->
</body>
于 2013-07-23T07:13:00.273 に答える
1

ページが読み込まれるまで html 要素は存在しませんが<body>、ブラウザーがタグを読み取る前に js が実行されます。スクリプト タグはタグの前にある<body>ため、ブラウザーは最初に js コードを実行します。ページが読み込まれるまで js コードの実行を遅らせる必要がある場合 (ほとんどの js コードの場合と同様)、jquery を使用したくない場合は、次のようにします。

<script type="text/javascript">

window.onload = function() {

   //js code here

}

</script>

その関数は、ページが読み込まれた後、onload イベントが発生するまで実行されません。onload イベントの問題は、イベントが発生する前にすべての画像を完全にロードする必要があることです。これには時間がかかり、js によって設定されたスタイルのレンダリングが遅れたり、js によって設定された onclick ハンドラをボタンが起動できるようになったりします。

別の方法として、body タグの直前に script タグを置くこともできます: ...

<script type="text/javascript">

  //js code here

</script>

</body>

その場合、ページ上のすべての html は、javascript タグが検出されたときにブラウザーによって解析され、その結果、すべての html 要素が存在します。<img>解析されるタグは存在しますが、ブラウザはタグが読み込まれるのを待ちません。ブラウザは続行し、画像の読み込み中に残りの html を解析します。終了タグがまだ表示されていなくても、 body 要素も存在します。

js コードが html を乱雑にしないように、js ファイルにリンクすることをお勧めします。

<script type="text/javascript" src="myjs.js"></script>
</body>

また、これがある場合：

<body class="bgcolor">

...そしてあなたのjsコードはこれを行います:

document.getElementsByTagName('body')[0].className += 'mac-os';

...それからあなたは彼を得るでしょう:

<body class="bgcolormac-os">

...これはあなたが望むものではありません。そこにスペースを追加する必要があります：

     ....    += ' mac-os';

...次のようになります。

<body class="bgcolor mac-os">

コード スタイルに関するコメント: 次のように、さらにスペースを追加する必要があります。

if (1 == mac) {
  document.getElementsByTagName('body')[0].className += 'mac-os';
}
else {
  document.getElementsByTagName('body')[0].className += 'win-os';
}

また、「寄り添う」else 句を使用しないでください。これらは本当に醜いものです。else が新しい行で始まる例のスタイルを使用することを検討してください。コードの明快さはあなたが目指しているものです - 最小バイト数ではありません。また、スペースを 2 つだけインデントすることも検討してください。js ステートメントはかなり長くなる可能性があるため、スペースを節約すると便利です。

そして、これらの長いステートメントを再入力するdocument.get....必要がなくなり、コードを読みやすくするために、次のようなことができます。

   var mybody = document.getElementsByTagName('body')[0];

   if (1 == mac) {
      mybody.className += ' mac-os';
    }
    else {
      mybody.className += ' win-os';
    }
于 2013-07-23T07:41:55.587 に答える
0

あなたのコードは機能します。コードをラップするのを忘れた可能性があります

$(function () {
  //your code
});

?

$(function () {
    var mac = 0;
    if (navigator.userAgent.indexOf('Mac') > 0) {
        mac = 1;
    } else {
        mac = 0;
    }

    if (1 == mac) {
        //document.body.className+='mac-os';
        //document.getElementsByTagName('body')[0].className+='mac-os';
        $('body').addClass('mac-os');
    } else {
        //document.body.className+='win-os';
        //document.getElementsByTagName('body').className+='win-os';
        //$('body').addClass('mac-os');
        //$("body.className").addClass('win-os');
        //document.body.className += " " + 'win-os';
        $("body").addClass('win-os');
    }
});
于 2013-07-23T07:13:52.090 に答える
0

jquery コードをブロックに入れるだけ$(document).ready(...)で、正しい時間で実行されるようになります...:

$(document).ready(function() {
    // jquery codes...
    $(document.body).addClass('your-class');
    // ...
});
于 2013-07-23T07:15:50.260 に答える