这是我的,但它不工作:
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");
});