1

如果操作系统是 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根本不存在。

确保在 DOM 准备好之前不会执行您的代码，方法是将其放入ready处理程序中：

$(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 元素直到页面加载后才存在，但是您的 js<body>甚至在浏览器读取标签之前就已执行。您的脚本标签位于<body>标签之前，因此浏览器首先执行 js 代码。如果您需要将 js 代码的执行延迟到页面加载之后（大多数 js 代码就是这种情况）——并且你不想使用 jquery——那么你可以这样做：

<script type="text/javascript">

window.onload = function() {

   //js code here

}

</script>

在页面加载之后的 onload 事件发生之前，该函数不会执行。onload 事件的问题是，所有的图片必须在事件触发之前完全加载，这可能需要很长时间，这将延迟渲染 js 设置的任何样式，或者允许按钮触发 js 设置的 onclick 处理程序。

作为替代方案，您可以将脚本标签放在结束正文标签之前：...

<script type="text/javascript">

  //js code here

</script>

</body>

在这种情况下，当遇到 javascript 标签时，页面上的所有 html 都将被浏览器解析，因此所有 html 元素都将存在。<img>被解析的标签将存在，但浏览器不会等待它们加载 - 浏览器会继续并在图像加载时解析 html 的其余部分。即使还没有看到它的结束标签，甚至 body 元素也存在。

更好的是链接到一个 js 文件，这样你的 js 代码就不会弄乱 html：

<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 回答