JS控制网页背景随窗口大小自动适应

最新推荐文章于 2025-11-11 11:09:42 发布

转载最新推荐文章于 2025-11-11 11:09:42 发布 · 1.4k 阅读

文章标签：

#html #function

Web前端专栏收录该内容

23 篇文章

订阅专栏

本文提供了一个使用HTML、CSS及JavaScript实现的页面窗口自适应调整示例，演示了如何根据浏览器窗口尺寸改变背景图片的大小，并实时显示窗口的宽度和高度。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>窗口变</title>
<style type="text/css">
*{margin:0;padding:0;}
#bg{
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
</head>
<body>
<div id="bg"><img src="http://www.wallcoo.com/ad/Korea_Besti_Belli/images/jihyun-bestibelli06.jpg" alt="HIGH"></div>
<input type="text" id="msg" name="msg" size="50"/>
<script type="text/javascript">
window.onresize = window.onload = function(){
     var w,h
     if(!!(window.attachEvent && !window.opera))
     {
      h = document.documentElement.clientHeight;
      w = document.documentElement.clientWidth;
     }else{
      h = window.innerHeight;
      w = window.innerWidth;
     }
document.getElementById('msg').value ='窗口大小：' + 'width:' + w + '; height:'+h;
    var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
    bgImg.width = (w - 5);
    bgImg.height= (h-5) ;

   }
</script>
</body>
</html>