Home > Developer > Web Develop
JS-offsetT/L/W/H and scrollT/L/W/H ...., offsettscrollt
People who have studied js are believed to have been troubled by these things:
ClientWidth, clientHeight, clientX, clientY, offsetX. offsetY, offsetLeft, offsetTop, offsetWidth, offsetHeight,
ScrollTop, scrollLeft, and so on. Looking at this pile of things, we started to get dizzy and vomit.
What are they doing? Today, let's thoroughly break this group of things and see what it is? After reading it, you will find that it is so easy !! Mom no longer needs to worry about you being dizzy!
ClientWidth:Represents the width of the browser's visible area
ClientHeight:Represents the height of the browser's visible area
When the width and height of the browser's visible area change, the clientWidth and clientHeight also change.
OffsetWidth:Obtains the width of an object.
OffsetHeight:Obtains the height of an object. (If padding and border values exist, they include the padding and border values)
OffsetLeft:Returns the left margin relative to the parent object.
OffsetTop:Obtains the top margin relative to the parent object.
ScrollTop:The distance from the page to scroll up
ScrollLeft:The distance from the page to the left
ScrollWidth:Width of the scrollable Area
ScrollHeight:Height of the scrollable Area
ClientY:When a mouse event occurs, the position of the mouse relative to the Y axis of the browser;
ScreenX:When a mouse event occurs, the position of the mouse relative to the X axis of the screen;
ScreenY:When a mouse event occurs, the position of the mouse relative to the Y axis of the screen;
OffsetX:When a mouse event occurs, the cursor is relative to the x-axis of the event source.
OffsetY:When a mouse event occurs, the position of the mouse relative to the Y axis of the event Source
The following is a detailed case test to illustrate the meaning of each
1. clientWidth: indicates the width of the browser's visible area; clientHeight: indicates the height of the browser's visible area
<script> var clientW = document.documentElement.clientWidth || document.body.clientWidth; var clientH = document.documentElement.clientHeight || document.body.clientHeight; document.write('clientWidth= '+clientW + " -- clientHeight"+clientH);</script>
When we narrow down the browser window, the clientWidht value and clientHeight value also change.
2. offsetWidth, offsetHeight: Get the width and height of the object itself (with padding and border values, including padding and border values)
<style> #box{ width: 100px;height: 100px; border: 2px solid #c00; }</style>
<body><div id="box"></div><script> var oDiv = document.getElementById('box'); var divW = oDiv.offsetWidth; var divH = oDiv.offsetHeight; document.write('offsetWidth= '+divW + " -- offsetHeight"+divH); /* var clientW = document.documentElement.clientWidth || document.body.clientWidth; var clientH = document.documentElement.clientHeight || document.body.clientHeight;*/</script></body>Added the border value.
Add a padding value.
#box{ width: 100px;height: 100px; border: 2px solid #c00; padding:5px;}
The red box parent class is the browser window, so the left and top of the red box are relative to the left margin and top margin of the browser window.
The green box has a red box parent, so the left and top values of the Green box are relative to the left margin and top margin of the red box.
<div id="box"> <div id="box2"></div></div>
<style> *{padding: 0;margin: 0;} #box{ position: relative;left: 100px;top: 100px; width: 400px;height: 400px; border: 2px solid #c00; } #box2{ width: 200px;height: 200px; border: 2px solid #0f0; position: absolute; left: 50px;top: 50px; }</style>
<Script> var oBox = document. getElementById ('box'); var oBox2 = document. getElementById ('box2 '); var boxL = oBox. offsetLeft; var boxT = oBox. offsetTop; var box2L = oBox2.offsetLeft; var box2T = oBox2.offsetTop; document. write ('box offsetLeft = '+ boxL + "-- box offsetTop =" + boxT + "<br>"); document. write ('box2 offsetLeft = '+ box2L + "-- box2 offsetTop =" + box2T); </script>
To test the effect, I specially set 5 divs with width: 2000px; height: 400px, which are distinguished by different colors.
As shown in the figure, the scroll bar measures the scroll distance of the scroll bar, which is more than 70 px, and the value obtained through scrollTop is more than 400 px, it can be seen that scrollTop gets more than 400 px Scrolling up the page, and the same is true for scrollLeft.
<style> *{padding: 0;margin: 0;} .box{ /*position: relative;left: 100px;top: 100px;*/ width: 2000px;height: 400px; } .box1{background: green;} .box2{background: blue;} .box3{background: yellow;} .box4{background: red;} .box5{background: black;}</style>
<div class="box box1"></div><div class="box box2"></div><div class="box box3"></div><div class="box box4"></div><div class="box box5"></div>
window.onscroll = function () { var scrollT = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollT);};
box1{background: green;width: 400px;height: 400px;}box2{background: blue;width: 2000px;height: 400px;}
window.onscroll = function () { var scrollW = document.documentElement.scrollWidth || document.body.scrollWidth; var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight; console.log(scrollW+"---"+scrollH);};
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
