一道面试题

最新推荐文章于 2024-09-15 19:46:31 发布

zhanglongying123

最新推荐文章于 2024-09-15 19:46:31 发布

阅读量5.3k

点赞数

文章标签：面试浏览器 function div filter 工作

本文链接：https://blog.csdn.net/zhanglongying123/article/details/6591183

版权

题目：div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域

实现：

<html>
<head>
<meta http-equiv="content" content="content-type:text/html;charset=utfu">
<title>滚动网页</title>
<style>
body{margin:0;padding:0}
#shadow{
position:absolute;
background:black;
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5;
}

</style>
</head>

<body>
<div id="shadow"></div>

<script>
for(var i=0;i<200;i++){
document.write(i+"<br>");
}
var w=document.body.clientWidth;
var h=document.body.clientHeight;
var shadow=document.getElementById("shadow");
shadow.style.width=w;
shadow.style.height=h;
window.οnscrοll=function(){
var w=document.body.clientWidth;
var h=document.body.clientHeight;
var t=document.body.scrollTop;
var l=document.body.scrollLeft;
var shadow=document.getElementById("shadow");
shadow.style.width=w;
shadow.style.height=h;
shadow.style.top=t;
shadow.style.left=l;
}

</script>
</body>

相关的知识：

function getInfo()
{
var s = "";
s += " 网页可见区域宽："+ document.body.clientWidth;
s += " 网页可见区域高："+ document.body.clientHeight;
s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += " 网页正文全文宽："+ document.body.scrollWidth;
s += " 网页正文全文高："+ document.body.scrollHeight;
s += " 网页被卷去的高(ff)："+ document.body.scrollTop;
s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;
s += " 网页被卷去的左："+ document.body.scrollLeft;
s += " 网页正文部分上："+ window.screenTop;
s += " 网页正文部分左："+ window.screenLeft;
s += " 屏幕分辨率的高："+ window.screen.height;
s += " 屏幕分辨率的宽："+ window.screen.width;
s += " 屏幕可用工作区高度："+ window.screen.availHeight;
s += " 屏幕可用工作区宽度："+ window.screen.availWidth;
s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
//alert (s);
}