首頁 > 開發者 > 網站開發

offsetTop clientX pageX screenX scrollTop之間的區別以及代碼實現，offsettopscreenx

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

offsetTop clientX pageX screenX scrollTop之間的區別以及代碼實現，offsettopscreenx


邊界尺寸

var a= e.pageX;//滑鼠在頁面中的座標位置，可能大於整個螢幕

var ay= e.pageY;//滑鼠在頁面中的座標位置，可能大於整個螢幕

//console.log(ay);

 

var b= e.clientX;//滑鼠在螢幕上的x座標

var by= e.clientY;//滑鼠在螢幕上的y座標,所以ay>=by

//console.log(by);

 

var f= e.screenX;//滑鼠在螢幕上的x座標

var fy= e.screenY;

//console.log(fy);

 

//位移量

var c=document.getElementById("top").offsetWidth;

var ch=document.getElementById("top").offsetHeight;

//console.log(c);//元素在水平空間上佔用的寬度大小，包括捲軸和邊框

var ct=document.getElementById("top").offsetTop;

var cl=document.getElementById("top").offsetLeft;

//console.log(ct);//元素上邊框至包含元素上邊框的距離

 

//客戶區大小

var d=document.getElementById("top").clientWidth;

var dh=document.getElementById("top").clientHeight;

//console.log(d);//元素內部空間的大小，就是不包框邊框和滾所以動條，offsetWidth>=clientWidth

 

//捲軸大小

var e=document.getElementById("top").scrollWidth;

var eh=document.getElementById("top").scrollHeight;

//console.log(e);//沒有捲軸情況下的寬度

 

var et=document.getElementById("top").scrollTop;

var el=document.getElementById("top").scrollLeft;

//console.log(et);//0

console.log(el);//0


源碼： 


<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>    <title>Document</title>    <style>        body{            background-color: #3399ff;            overflow: hidden;        }        body >div{            position: absolute;            top: 0;            bottom: 0;            left: 0;            right: 0;            margin:  auto auto;            width: 300px;            height: 300px;            background-color: deeppink;            border: 20px solid silver;        }        body >div >div{            width: 100%;            margin-top: 100px;            height: 100px;            background-color: green;        }        body >div >div >span{            display: block;            height: 100%;            width: 40%;            background-color: darkred;            position: relative;        }        body >div >div >span >a{            position: absolute;            display: block;            width: 40px;            height: 40px;            bottom: 0;            right: 0;            background-color: cornflowerblue;        }    </style></head><body><div id="top">    <div>        <span>            <a href=""></a>        </span>    </div></div></body><script>    window.onload=function(){      document.addEventListener('mousemove',function(e){          var a= e.pageX;//滑鼠在頁面中的座標位置，可能大於整個螢幕          var ay= e.pageY;//滑鼠在頁面中的座標位置，可能大於整個螢幕          //console.log(ay);          var b= e.clientX;//滑鼠在螢幕上的x座標          var by= e.clientY;//滑鼠在螢幕上的y座標,所以ay>=by          //console.log(by);          var f= e.screenX;//滑鼠在螢幕上的x座標          var fy= e.screenY;          //console.log(fy);          //位移量          var c=document.getElementById("top").offsetWidth;          var ch=document.getElementById("top").offsetHeight;          //console.log(c);//元素在水平空間上佔用的寬度大小，包括捲軸和邊框          var ct=document.getElementById("top").offsetTop;          var cl=document.getElementById("top").offsetLeft;          //console.log(ct);//元素上邊框至包含元素上邊框的距離          //客戶區大小          var d=document.getElementById("top").clientWidth;          var dh=document.getElementById("top").clientHeight;          //console.log(d);//元素內部空間的大小，就是不包框邊框和滾所以動條，offsetWidth>=clientWidth          //捲軸大小          var e=document.getElementById("top").scrollWidth;          var eh=document.getElementById("top").scrollHeight;          //console.log(e);//沒有捲軸情況下的寬度          var et=document.getElementById("top").scrollTop;          var el=document.getElementById("top").scrollLeft;          //console.log(et);//0          console.log(el);//0      },false)    };</script></html>


著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More