top、clientTop、scrollTop、offsetTop

图示说明如下：

<html>
<head>
<title>51windows.Net </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
</style>
</head>
<body>
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%0D%0Avar%20%20s%20%3D%20%22%22%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E5%8F%AF%E8%A7%81%E5%8C%BA%E5%9F%9F%E5%AE%BD%EF%BC%9A%22%2B%20document.body.clientWidth%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E5%8F%AF%E8%A7%81%E5%8C%BA%E5%9F%9F%E9%AB%98%EF%BC%9A%22%2B%20document.body.clientHeight%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E5%8F%AF%E8%A7%81%E5%8C%BA%E5%9F%9F%E5%AE%BD%EF%BC%9A%22%2B%20document.body.offsetWidth%20%20%2B%22%20(%E5%8C%85%E6%8B%AC%E8%BE%B9%E7%BA%BF%E7%9A%84%E5%AE%BD)%22%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E5%8F%AF%E8%A7%81%E5%8C%BA%E5%9F%9F%E9%AB%98%EF%BC%9A%22%2B%20document.body.offsetHeight%20%2B%22%20(%E5%8C%85%E6%8B%AC%E8%BE%B9%E7%BA%BF%E7%9A%84%E5%AE%BD)%22%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E6%AD%A3%E6%96%87%E5%85%A8%E6%96%87%E5%AE%BD%EF%BC%9A%22%2B%20document.body.scrollWidth%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E6%AD%A3%E6%96%87%E5%85%A8%E6%96%87%E9%AB%98%EF%BC%9A%22%2B%20document.body.scrollHeight%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E8%A2%AB%E5%8D%B7%E5%8E%BB%E7%9A%84%E9%AB%98%EF%BC%9A%22%2B%20document.body.scrollTop%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E8%A2%AB%E5%8D%B7%E5%8E%BB%E7%9A%84%E5%B7%A6%EF%BC%9A%22%2B%20document.body.scrollLeft%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E6%AD%A3%E6%96%87%E9%83%A8%E5%88%86%E4%B8%8A%EF%BC%9A%22%2B%20window.screenTop%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E7%BD%91%E9%A1%B5%E6%AD%A3%E6%96%87%E9%83%A8%E5%88%86%E5%B7%A6%EF%BC%9A%22%2B%20window.screenLeft%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E5%B1%8F%E5%B9%95%E5%88%86%E8%BE%A8%E7%8E%87%E7%9A%84%E9%AB%98%EF%BC%9A%22%2B%20window.screen.height%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E5%B1%8F%E5%B9%95%E5%88%86%E8%BE%A8%E7%8E%87%E7%9A%84%E5%AE%BD%EF%BC%9A%22%2B%20window.screen.width%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E5%B1%8F%E5%B9%95%E5%8F%AF%E7%94%A8%E5%B7%A5%E4%BD%9C%E5%8C%BA%E9%AB%98%E5%BA%A6%EF%BC%9A%22%2B%20window.screen.availHeight%3B%0D%0As%20%2B%3D%20%22%5Cr%5Cn%E5%B1%8F%E5%B9%95%E5%8F%AF%E7%94%A8%E5%B7%A5%E4%BD%9C%E5%8C%BA%E5%AE%BD%E5%BA%A6%EF%BC%9A%22%2B%20window.screen.availWidth%3B%0D%0Aalert(s)%3B%0D%0A%3C%2FSCRIPT%3E">
</body>
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程