javascript中获取浏览器窗口中可视区域

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<style type="text/<a href=" http: target="_blank">css">
body {
	height:100%;
	margin:0;
	padding:0;
}
#warp {
	position:absolute;
	top:0;
	left:0;
	background:#059B9A;
	z-index:100;
	filter:alpha(opacity=50); /* IE */
	-moz-opacity:0.5; /* Moz + FF */
	opacity: 0.5;
}
</style>

<script type="text/javascript">
function getViewportInfo()
{
	var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
	var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;
	return {w:w,h:h};
};

function setEl()
{
	var info = getViewportInfo();
	var el = document.getElementById('warp');
	el.style.px';
	el.style.px';
}

window.onload = function() {
	setEl();
}
window.onresize = function() {
	setEl();
}

</script>

<div id="warp" onclick="document.getElementById('warp').style.display='none'"></div>

<div style="text-align:center;font-weight:bold;margin:20px 0;">
	如果你看到一个半透明的层，并且窗口中没有出现滚动条，说明示例运行正常.<br>
	点击可以关闭透明层。
</div>

提示：您可以先修改部分代码再运行

相关文章

精彩推荐