getBoundingClientRect() in Javascript DOM

The Element.getBoundingClientRect method will return you an object containing properties about the surrounding rectangle of an Element. These are all relative to the top-left corner of the viewport (or browser window). This also takes the border-box into account, meaning any borders or padding is included within the returned properties.
It's very useful for building user interfaces and in this video we look at an example of how we can actually get this data and also a simple demo of it being used where once a DIV comes into view, its background color is changed to red.
Check this out:
developer.mozilla.org/en-US/d...
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

[@kamolidinrahmonov1265]

Perfectly explained, was having hard time to figure it out. After watching this, got a clear vision. Simple and easy!

[@RajibAhmad]

This the best tutorial not only for understanding getBoundingClientRect() but also to how to reveal element on scroll.... please tag that one topic as well

[@chillncode8313]

This the only tutorial about this method really helped me. Thanks for your amazing tutorials

[@csokinyusziszar]

such a clear explanation.. very easy to understand with the help of your video!
Thank you so so much!

[@cassiocustodio]

Sempre quis aprender isso e você explicou de uma forma simples, direta e bem didática. Muito obrigado!

[@strokes3994]

Bro your channel is literally a lifesaver. Keep it up.

[@ThatGhettoNerd]

You deserve more views. Thank you so much!

[@dcode-software]

No problem 😀

[@danielmorales0917]

Thank you! I already understood this method for applying my effects, it is great!

[@beinyourguard]

That was a very simple and very helpful tutorial. Thanks a lot!

[@milosleng1175]

This is the best video on YT on this. Finnaly I get it. The fact you explained all the properties of that object we get when we call GetboundingClient was ULTRA helpful. I was so afraid of this because I watched many tutorials on this and they were very confusing. You nailed it! THANKS!

[@Y2KillerSPOOBLY]

This was insanely helpful. Thanks so much.

[@shineLouisShine]

Incredibly explained. I appreciate it a lot. Thank you!

[@isakawilliam]

This is a very simplified explanation, and thanks alot brother

[@bobross3937]

You sir, just made my life a whole lot easier. Thanks!

[@thefunnylemon6291]

Awesome video, super informative and you explained it very well !

[@memmudmemmed3022]

thx mate! you helped me alot! very clear explanation, and to the point!

[@jayatalykov440]

Thank you, sir!! This was extremely helpful!!

[@artembelyshev9467]

thank you! very useful content, easy and clear

[@yangyangcui9150]

Great Demo!👍🏻

[@ikenjokudc]

thank you sir. i like that your explanation was apt and brief

[@tetsuorulin9009]

very well explained, thanks my G

[@girlandhercomputer7204]

also thanks for letting me know how to test progress step by step~

[@mightytunesng]

Thanks for the explanation man

[@ajayraj7859]

Thank you very much , you explained it so well :)

[@yildiz12321]

Thank you so much, you have been very helpful.

[@LD-oq1co]

incredible demonstration! thank you so much

[@dcode-software]

You are very welcome! 😎

[@marektrybua1722]

clearly explanation, thanks a lot

[@helloitsjury]

Super helpful!!

[@tahaanass3097]

Awesome video thank you so much

[@shopifyklaviyoexpert586]

Love you sir from Bangladesh. 🇧🇩

[@locdang4042]

It's very helpful. Thanks.

[@pablotexeira7579]

great content bro, keep it up!!!

[@Banjer]

Really helpful, thanks a lot!!!

[@prasanthmoolethodi3152]

Thank a lot for the video.

[@Osirisdigitalagency]

Life saver… I could have done this using GSAP but I really wanted to understand the core 💯

[@girlandhercomputer7204]

thank you for your clear expression, i understand very well , very good video! one more sub~

[@dcode-software]

Hey there, thanks for your support! Glad it could help you 😁

[@samialvi4226]

Thank you so much cleared every doubt

[@froilanimnida]

perfectly explained!

[@Zaynali._]

Thanks for this.

[@Evikeuklavier]

I'll be using this at work. Saved my butt lol!

[@willybon]

Awesome dude!

[@iamusmanshykh]

Thanks ... much better video then the 99% ... great job man

[@himeshmaurya7338]

Thanks sir I am to much confused about it .but after this video I am to much clear about concept

[@Mahi-td2rj]

very helpful video

[@SonNguyen-wx8ep]

thank you so much teacher

[@troonder6274]

Woooow, mate)) Nice video

[@RajYadav-yh7vv]

Thanks for this video tutorial.. but how to get the x and y cordinate of the all the side of the rectangle? as I am trying to use it in image labeling when user select for labeling

[@rajkiranchaudhary8769]

Well explained .....

[@enjoyit6726]

great video but if want the box to get its original styling when it is not on the visible in the viewport?

[@nguyenvanlenh5228]

Thanks this help me a lot

[@dcode-software]

No worries mate!

[@mohamedyoussef8835]

Awesome video ++++++++++++ 😃

[@warrengaytero1682]

Thanks you sir God Bless❤️

[@jaimedpcaus1]

How do you create rectangles using the mouse down and mouse up ?

[@chrisj.2611]

I just wonder how this works with multiple objects (like three or more boxes which each e.g. changes backgroundColor when inView)?

[@colindante5164]

Thankyou much. )))

[@fullstackprojects5615]

Thank you so much

[@dev1293]

which keyboard are you using? It's so satisfying

[@denisvradiy8503]

thank you so much!!!!

[@mdiqbal7168]

Why green color not come when reverse the scrollbars in using getBoundingClientRect().top

[@ThatGhettoNerd]

How can we implement this targeting multiple elements scrolling further down? Let's say we added a few duplicates of boxes and tag elements in the html. How can we trigger their event once they're in viewport like the first one? TY for the vids!

[@rickyu1978]

Thanks, how does this work on different view port sizes?

[@dcode-software]

Hey, no worries! I don't see any reason why the behaviour will change on different view-port sizes :)

[@kolbecrypto2976]

Tnx❤🔥

[@anurajms]

thank you

[@jibonislamgame]

i have a issue . my return value not update it return same value every time. how can solve it

[@pavkey88]

This is great. How would you do this to track an animated element without any human interaction

[@xerxius5446]

To determine if something is visible in the screen or not, use IntersectionListener instead of listening for scroll event in window. listening to scroll is very inefficient. (if you do want to listen to scroll for something else, use debouncing )

[@indiaflair]

thanks bro

[@dcode-software]

No problem. Happy it helped you!

[@ahmedradwan9664]

thanks a lot

[@dcode-software]

No worries! Happy it helped you

[@abanwaraphael1526]

Please the DOMRect is returning zero for all the values..
Your course is sooo good. Thank you, thank you, thank you..
Please, I'm stuck here. The DOMRect is returning zero for x, y, width, height, top, left, right, bottom.. everything of the DOMRect value is returning zero. Please how do I go about it.. I have the exact code as yours

[@Tony.Nguyen137]

The DomRect values are related to the viewport and not the browser window !

[@shorttipsandtricks5501]

great

[@TheJerLogan]

it is telling me getBoundingClient isn't a function...I have it written exactly the same as you

[@dcode-software]

Were you using querySelectorAll prior to that?

[@HelloWorld-mh6su]

I don't understand why the hell you've only 3k Subscribers?

[@zinaright]

Alright

[@mathis-meth4229]

Dom talking about

[@ryanfrost6319]

Took you 2.30 mins until you started explaining 👎