javascript 根据浏览器窗口大小动态更改正文 ID（使用 css）答案

【问题标题】：javascript change body ID (with css) dynamically with respect to browser window sizejavascript 根据浏览器窗口大小动态更改正文 ID（使用 css）
【发布时间】：2011-07-30 07:47:29
【问题描述】：

这是我所拥有的，但它不起作用：

 if(window.width() < 1000)
document.getElementsByTagName('body')[0].id="be"
else
document.getElementsByTagName('body')[0].id="bd"
;

请告诉我我写错了什么。请不要告诉其他解决方案，请修复此代码。

基本上，如果浏览器窗口大小小于 1000 像素，我想为网站的 BODY 标签赋予不同的 ID。

【问题讨论】：

为什么要使用不同的 ID？为什么不给它上课呢？另外，您是否遇到错误？你怎么知道它不起作用？

标签： javascript css window size

【解决方案1】：

我推荐使用 jQuery，一个 JavaScript 库。它处理了很多浏览器不兼容问题。例如，IE 不支持 innerWidth 和 outerWidth 属性。

这将跨浏览器工作：

$(function(){
    $("body").attr("id", $(window).width() < 1000 ? "be" : "bd");
});

如果您希望它随着窗口大小调整而改变，您需要为窗口调整大小事件添加一个事件监听器：

$(window).resize(function(){
    $("body").attr("id", $(this).width() < 1000 ? "be" : "bd");
});

【讨论】：

这看起来也很棒。我应该在哪里添加这个？ Javascript 文件？索引主页文件（它是 index.php）？具体如何？例如，我到底应该将什么复制到底部的 Javascript 文件中？提前谢谢！
好的，我刚刚将该代码添加到底部。但是，它调整了我的整个页面。而如果我只是在 index.php 文件中手动定义“be”的 ID，它适用于较小的窗口并且不会弄乱我的页面。
@aaaaaaaaaaaaaa11111111111111，你应该可以逐字复制两个代码 sn-ps 并将它们放在任何你想要的地方。我建议将它们放在 JavaScript 文件中，以使 JS 代码与 HTML 分开。
没关系，我的错！我不小心删除了 css 文件中的结束 }（哎呀！）。但是由于某种原因，这个仍然无法正常工作......
好的，我已经解决了这个问题。但是，如果可能的话，我想使用您的解决方案，因为它也可以在 IE 上运行。

【解决方案2】：

给你：

document.body.id = window.innerWidth < 1000 ? 'be' : 'bd';

将此代码放在页面底部：

<script>
    function setBodyId() {
        document.body.id = window.innerWidth < 1000 ? 'be' : 'bd';
    }           
    window.onload = setBodyId;
    window.onresize = setBodyId;
</script>

现场演示： http://jsfiddle.net/simevidas/THqXB/

【讨论】：

@aaa 你想在页面加载时执行这个？
我希望它这样执行：当用户缩小浏览器窗口时，如果他们使浏览器窗口小于1000px，那么我想定义“be”的ID
另外，我将它包含在我的 javascript 文件中，而不是在我的索引页面中。我刚刚删除了

【解决方案3】：

window.width() 不是函数。请改用window.innerWidth 或window.outerWidth。（检查浏览器兼容性）

【讨论】：

【解决方案4】：

您可以使用 javascript 执行此操作，但最佳解决方案是针对此类情况使用 CSS 媒体查询。

见>CSS Media Queries as Browser Resizes?

【讨论】：

请告知更多。但是，如果有人对上述代码有解决方案，请告诉我，因为目的也是为了更好地编写 javascript。