在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 原生js獲取距離頁(yè)面頂端的距離

原生js獲取距離頁(yè)面頂端的距離

不用jquery的情況下，因?yàn)橛玫氖莢ue框架，獲取元素到頁(yè)面頂端的距離
demo的代碼如下：
問(wèn)題1 offsetTop只能獲取到有定位元素父級(jí)的距離，怎么獲取到頁(yè)面頂端距離呢
問(wèn)題2 子級(jí)有了transform 24px但offsetTop卻獲取不到 下面打印出來(lái)的值是0
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"

    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>dddddddddddddd</p>
<div class="box">

  <div class="child">
  </div>

</div>
</body>
<style>
p{

 line-height:29px;
font-size:29px}

.box{

 width:100px;
height:100px;
margin-top: 120px;
margin-left:180px;
border:2px solid green;
position: relative;}

.child{

width:50px;
height:50px;
transform: translateY(24px);
border:1px solid red; }

</style>
<script>
var Child=document.getElementsByClassName('child')[0]
var Box=document.getElementsByClassName('box')[0]
console.log(Child.offsetTop) // 得到0
console.log(Box.offsetTop); //178
// console.log(Box.offsetLeft)
// offsetTop //有定位元素的父級(jí)距離
</script>
</html>

回答
編輯回答
局外人
問(wèn)題1 offsetTop只能獲取到有定位元素父級(jí)的距離，怎么獲取到頁(yè)面頂端距離呢

getBoundingClientRect().top

問(wèn)題2 子級(jí)有了transform 24px但offsetTop卻獲取不到 下面打印出來(lái)的值是0

見(jiàn)問(wèn)題1回答；

clipboard.png

對(duì)么？

2017年6月30日 18:40