用JS来控制DIV窗口的宽高

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

window.οnresize=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;
	}


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值