Question

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

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

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

基本上，如果浏览器窗口大小小于1000px，我想为网站的BODY标记提供不同的ID。

Answer 1

你走了：

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/

Answer 2

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

参见＆gt; CSS Media Queries as Browser Resizes?

Answer 3

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

Answer 4

我建议使用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根据浏览器窗口大小动态更改正文ID（使用css）

4 个答案: