代码描述:pageYOffset与pageXOffset属性用法。pageYOffset与pageXOffset属性用法代码下载
标题中的两个属性在实际中少有出现,当然也不能够就此断定没有它们的用武之地,所以最好还是要掌握它们的用法,下面就对此做一下简单介绍,希望能够捐给需要的朋友带来帮助。 一.基本介绍: pageYOffset属性可以返回页面的左上角距离浏览器客户区顶端的距离。 pageXOffset属性可以返回页面的左上角距离浏览器客户区左端的距离。 则两个属性的返回值可以用以下属性替代: 1.pageYOffset可以用以下代码替代:
<script> document.documentElement.scrollTop||document.body.scrollTop </script>
2.pageXOffset可以用以下代码替代:
<script> document.documentElement.scrollLeft||document.body.scrollLeft </script>
二.浏览器兼容性: 上面的两个属性只有在IE8以上浏览器或者谷歌、火狐等标准浏览器中支持。 三.代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端s</title> <style type="text/css"> *{ margin:0px; padding:0px; } input{ margin:200px; } #show{ width:120px; height:50px; position:fixed; top:0px; right:0px; } </style> <script type="text/javascript"> window.onload=function(){ var obt=document.getElementById("bt"); var oshow=document.getElementById("show"); obt.onclick=function(){ oshow.innerHTML="pageYOffset:"+window.pageYOffset+"<br/>" +"pageXOffset:"+window.pageXOffset; } } </script> </head> <body style="height:1000px;width:1500px;"> <div id="show"></div> <input type="button" id="bt" value="查看效果"/> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能