Question

如果操作系统是MAC，我设置一个变量＆amp;然后在条件我想在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>

我已经尝试过但都失败了。

Answer 1

当前代码执行时，body元素可能根本不存在。

确保在DOM准备就绪之前不执行代码，方法是将其放在ready处理程序中：

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

如果你将它放在<body>元素内，通常在页面的末尾也可以。

Answer 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>
<!-- your script -->
<!-- others -->
</body>

Answer 3

在页面加载之前，html元素不存在，但是在浏览器甚至读取<body>标记之前，js正在执行。您的脚本标记位于<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。即使身体元素存在，即使它的结束标记还没有被看到。

更好的是链接到一个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';
}

另外，不要使用'cuddled'其他条款 - 它们真的很难看。考虑使用else在新行上开始的示例中的样式。代码清晰度是您的目标 - 而不是最少的字节数。您可能还会考虑缩进2个空格 - js语句可能会很长，因此节省空间可能会有所帮助。

为避免重新输入那些长document.get....语句并使代码更易于阅读，您可以执行以下操作：

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

   if (1 == mac) {
      mybody.className += ' mac-os';
    }
    else {
      mybody.className += ' win-os';
    }

Answer 4

Your code有效，也许您忘了用

包装代码

$(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');
    }
});

Answer 5

只需将您的jquery代码放在$(document).ready(...)块中，以确保它们在正确的时间内执行...：

$(document).ready(function() {
    // jquery codes...
    $(document.body).addClass('your-class');
    // ...
});

Javascript在body标签中添加新类

5 个答案: