用JS来控制DIV窗口的宽高

在一次用JS做注册页面验证的时候，突然想美化一下。然后就弄了一张背景图片作为网页背景，但是发现，我在css里面给大DIV设置了一个height：100%，背景图片尺寸是cover，可是背景图片并没有根据我窗口放大缩小发生改变，这时候我就上网找了下，终于知道了方法，可以用js里面的document.documentElement.clientWidth和document.documentElement.clientHeight来控制背景DIV的大小，使其填满整个页面。下面我就写一下，具体的使用方法（加上注释）

window.onresize=function boxheight(){
    var w = document.documentElement.clientWidth ;//可见区域宽度  
    var h = document.documentElement.clientHeight;//可见区域高度  
    var bg = document.getElementById('bg');  
    bg.style.width=w+"px";  
    bg.style.height=h+"px";  
}

<div id=“bg” class=“bg”></div>

如果再配合CSS样式里面的in-width和min-height一起使用，效果就更加好了

.bg{  
    min-width:400px;  
    min-height:560px;  
    background:url(../img/green_bg.jpg) no-repeat;  
    background-size: cover;  
    overflow:hidden;  
}

欢迎分享本文，转载请保留出处：前端ABC » 用JS来控制DIV窗口的宽高