scrollLeft scrollTop offsetLeft offsetTop 的区别

scrollLeft scrollTop offsetLeft offsetTop 的区别<!DOCTYPEHTML><head><meta http-equiv="Content-Type&q

欢迎大家来到IT世界,在知识的湖畔探索吧!

<!DOCTYPE HTML>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<script type=”text/javascript”>

function req(){

var div = document.getElementById(“div1”);

document.getElementById(“li1″).innerHTML = (div.offsetTop)+”px”;//div1距离屏幕顶部的距离

document.getElementById(“li2″).innerHTML = (div.offsetLeft)+”px”;//div1距离屏幕左部的距离

document.getElementById(“li3″).innerHTML = (div.scrollTop)+”px”;//div1纵向滚动条滚动的距离

document.getElementById(“li4″).innerHTML = (div.scrollLeft)+”px”;//div1横向滚动条滚动的距离

}

</script>

</head>

<body style=”border:10px solid #ccc;padding:0px 0px;margin:5px 10px”>

<div style=”width:60%;border-right:1px dashed red;float:left;”>

<div style=”float:left;”>

<div id=”div1″ style=”border:5px red solid;height:300px;width:200px;overflow:auto”>

<div style=”height:500px;width:400px”>请调整横竖滚动条后,点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>

</div>

<input type=”button” value=”点击我!” onclick=”req()” style=”border: 1px solid purple;height: 25px;”/>

</div>

</div>

<div style=”width:30%;float:left;”>

<ul style=”list-style-type: none; line-height:30px;”>结果:

<li>offsetTop : <span id=”li1″></span></li>

<li>offsetLeft : <span id=”li2″></span></li>

<li> scrollTop : <span id=”li3″></span></li>

<li>scrollLeft : <span id=”li4″></span></li>

</ul>

</div>

<div style=”clear:both;”></div>

</body>

</html>

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/35940.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

联系我们YX

mu99908888

在线咨询: 微信交谈

邮件:itzsgw@126.com

工作时间:时刻准备着!

关注微信