您的位置:首页 > Web前端 > JavaScript

用JS来控制DIV窗口的宽高

2017-03-11 17:05 260 查看
在一次用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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息