offset/scroll/client实例

最新推荐文章于 2022-09-09 23:50:32 发布

一瓶微风

最新推荐文章于 2022-09-09 23:50:32 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/BReezeFK/article/details/105473820

版权

offset
offsetWidth/offsetHeight
获取元素真实宽高
scroll
scrollWidth/scrollHeight
获取元素内容真实的宽高
client
clientWidth/clientHeight
获取的是页面的可视区域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				border-left: 80px solid pink;
				border-top: 20px solid green;
				overflow: auto;
			}
		</style>
	</head>
	<style type="text/css">
		
	</style>
	<body>
		<div id="box">
			<img src="img/timg.jpg" >
		</div>
		<script type="text/javascript">
			var box=document.getElementById("box");
			console.log(box.offsetWidth,box.offsetHeight);
			console.log(box.scrollWidth,box.scrollHeight);			
			console.log(box.clientWidth,box.clientHeight);
			console.log(box.clientLeft,box.clientTop);
			console.log(window.innerWidth,window.innerHeight);
			//谷歌火狐 window
			//IE8 html document.documentElement
			//其他浏览器 body
		</script>
	</body>
</html>