javascript改变主体ID(与css)相对于浏览器窗口大小动态

javascript change body ID (with css) dynamically with respect to browser window size

本文关键字：相对于 浏览器 窗口大小 动态 css 改变 主体 ID javascript      更新时间：2023-09-26

这是我的，但它不工作:

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

请告诉我哪里写错了。请不要告诉其他的解决方案，请修复这段代码。

基本上，我想给一个网站的BODY标签一个不同的ID，如果浏览器窗口大小小于1000px

给你:

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/

你可以用javascript来实现，但对于这种情况，最佳的解决方案是使用CSS媒体查询。

参见> CSS媒体查询浏览器调整大小?

window.width()不是函数。使用window.innerWidth或window.outerWidth代替。(检查浏览器兼容性)

我推荐使用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");
});
相关文章：