Javascript在body标记中添加新类
如果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>我几乎都试过了，几乎失败了。
回答 5
Stack Overflow用户
发布于 2013-07-23 15:11:28
在执行当前代码时，body元素很可能根本不存在。
通过将代码放入ready处理程序中，确保在DOM就绪之前不会执行代码：
$(document).ready(function() {
// your code
...
});如果您将它放在<body>元素中，通常放在页面的末尾，它也会起作用。
Stack Overflow用户
发布于 2013-07-23 15:13:00
如果你的脚本在你的头上，你应该等到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>Stack Overflow用户
发布于 2013-07-23 15:41:56
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">...and你的js代码是这样做的：
document.getElementsByTagName('body')[0].className += 'mac-os';...then你会得到他的：
<body class="bgcolormac-os">...which不是你想要的。您需要在其中添加一个空格：
.... += ' mac-os';你得到的...so：
<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子句--它们真的很难看。考虑使用示例中的样式，其中else从新行开始。代码清晰度是您的目标--而不是最少的字节数。您还可以考虑只缩进2个空格--js语句可能会变得很长，因此节省空间会很有帮助。
为了避免重新键入那些冗长的document.get....语句，并使代码更易于阅读，您可以这样做：
var mybody = document.getElementsByTagName('body')[0];
if (1 == mac) {
mybody.className += ' mac-os';
}
else {
mybody.className += ' win-os';
}https://stackoverflow.com/questions/17803520
复制相似问题
腾讯云开发者
