Get page element location

XXHolic 2021-02-23 03:44:18
page element location


Introduction

When trying something recently , Again, the location where you need to get the element , I'll sort it out by myself this time .

Basic attribute information

clientHeight/clientWidth

var cHeight = element.clientHeight;
var cWidth = element.clientWidth;
 Copy code 
  • Read-only property , Is the internal height of the element content / Width , Contains the inside margin (padding), Excluding level / Vertical scroll bar 、 Frame (border) And the outer margin (margin).
  • This property rounds the obtained value to an integer .

77-client

innerHeight/innerWidth、outerHeight/outerWidth

var iHeight = window.innerHeight;
var iWidth = window.innerWidth;
 Copy code 
  • Read-only property , The height of the browser window's view .
  • Any window or object that behaves like a window ( For example, frames or tabs ) It's all available on the Internet , Such as window、frame、frameset or secondary window .
var oHeight = window.outerHeight;
var oWidth = window.outerWidth;
 Copy code 
  • Read-only property , The height of the entire browser window , Including the sidebar 、 Window trim and window trim borders .

77-inner-outer

offset Related properties

offset One kind of attribute is :offsetTopoffsetLeftoffsetWidthoffsetHeight .

var oLeft = element.offsetLeft;
var oTop = element.offsetTop;
var oWidth = element.offsetWidth;
var oHeight = element.offsetHeight;
 Copy code 
  • Read-only property .
  • offsetTopoffsetLeft Relative to the element offsetParent The offset pixel value of the inner margin boundary ,offsetParent Is the nearest location element that contains the element or table、td、th、body Elements .
  • offsetWidth/offsetHeight The border containing the element (border)、 padding (padding)、 Scroll bar 、 as well as CSS Width set (width)/ Height (height) Value .
  • For block level elements , The above property description is relative to offsetParent ; For in-line elements , The above property description is relative to the first bounding box .

77-offset

scroll Related properties

scroll One kind of attribute is :scrollLeftscrollTop

var sLeft = element.scrollLeft;
var sTop = element.scrollTop;
element.scrollTop = intValue
element.scrollLeft = intValue
 Copy code 
  • Can read but write .

Be careful : The following positions , It refers to the coordinates of the upper left corner of an element relative to the upper left corner of another element .

Element position relative to parent element

The situation of the parent element can be divided into : Direct parent element 、 Indirect parent element .

Let's make the problem concrete , Mainly used offset Related properties . Complex layouts can be similar .

The factors that may affect the final position result are :

  • Elemental box-sizing attribute
  • Elemental position attribute
  • Elemental border attribute
  • Elemental padding attribute

Direct parent element

This is a The test page , Mobile access is as follows :

77-parent

Indirect parent element

This is a The test page , Mobile access is as follows :

77-higher-parent

Whether the element is in the scrolling view

Because of the different layout and CSS attribute , There may be differences in the way they are calculated , This is an easy one Example , Mobile access is as follows :

77-into-view

The example is mainly judgment logic

function checkIntoView() {
var scrollEle = document.querySelector('.list');
var scrollEleHeight = scrollEle.offsetHeight;
var itemHeight = -document.querySelector('.item').offsetHeight;
var intoViewEle = [];
var scrollTopDis = scrollEle.scrollTop;
document.querySelectorAll('.item').forEach(function(ele,index) {
var top = ele.offsetTop;
var gap = top - scrollTopDis;
if (gap>itemHeight && gap <=scrollEleHeight) {
if (intoViewEle.indexOf(index)<0) {
var indexNum = index + 1;
intoViewEle.push(' Elements '+indexNum)
}
}
})
var showMsg = intoViewEle.join(',');
document.querySelector('#result').innerHTML = ' Some or all of the elements already in the scrolling view are :<br />'+showMsg;
}
 Copy code 

Reference material

Looking back

77-poster

版权声明
本文为[XXHolic]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222134322260j.html

  1. Configure the certificate to enable ngnix to publish the trusted website of HTTPS
  2. Javascript数据类型
  3. HTTP interface debugging tool! 48000 star HTTP command line client!
  4. Parameter encryption of front end URL link band
  5. HTTP interface debugging tool! 48000 star HTTP command line client!
  6. Three front end frameworks: data binding and data flow
  7. Reading Axios source code (1) -- exploring the realization of basic ability
  8. Event bubble and capture in JavaScript
  9. 【微前端】微前端最終章-qiankun指南以及微前端整體探索
  10. R & D solution e-Car front end monitoring system
  11. [JS] 877 - 35 wonderful knowledge of JavaScript, long experience!
  12. R & D solution e-Car front end monitoring system
  13. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  14. 解决ajax跨域问题【5种解决方案】
  15. Top ten classic sorting of JavaScript
  16. HTTP 1. X learning notes: an authoritative guide to Web Performance
  17. Vue3 component (IX) Vue + element plus + JSON = dynamic rendering form control component
  18. My http / 1.1 is so slow!
  19. Why Vue uses asynchronous rendering
  20. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  21. The tapable instance object hook of webpack4. X core tool library
  22. The tapable instance object hook of webpack4. X core tool library
  23. Using libcurl for HTTP communication in C + +
  24. Using libcurl for HTTP communication in C + +
  25. Using CSS variable in Vue
  26. Deeply understand the update of state and props in react
  27. No matter how fast the Internet is, it's useless! In addition to Baidu disk, there is this website slow to let you eat shriveled
  28. Baidu share does not support the solution of HTTPS
  29. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  30. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  31. Vue cli creates vue3 project
  32. Nginx reverse proxy for windows authentication using NTLM
  33. Rust tutorial: introduction to rust for JavaScript developers
  34. Deploying personal blog to Tencent cloud with serverless framework
  35. R & D solution e-Car front end monitoring system
  36. JavaScript advanced learning
  37. Spend 1 minute to master these 5 ppt tips, courseware making less detours
  38. Vue: vuex persistent state
  39. React native gets the current network state of the device Netinfo
  40. High performance nginx HTTPS tuning - how to speed up HTTPS by 30%
  41. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  42. JavaScript advanced: Javascript object-oriented, JavaScript built-in object, JavaScript BOM, JavaScript encapsulation
  43. Vue determines whether the El form in the elementui is updated or changed. If it changes, it will prompt whether to save it. If it does not change, it will leave directly
  44. Algorithm problem: sum of two numbers -- JavaScript and Java implementation
  45. High performance nginx HTTPS tuning
  46. JQuery advanced
  47. day 30 jQuery
  48. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  49. TCP/IP 开胃菜 之 HTTP
  50. JQuery:JQuery Basic syntax, jQuery selector, jQuery DOM, comprehensive case check box, comprehensive case random picture
  51. JavaScript data type
  52. [micro front end] the final chapter of micro front end - Qiankun guide and overall exploration of micro front end
  53. Solve Ajax cross domain problem [5 solutions]
  54. HTTP of TCP / IP appetizer
  55. Optimization of pod creation efficiency in serverless scenario
  56. Iqiyi Sports: experience the ultimate expansion and contraction of serverless, and increase the utilization rate of resources by 40%
  57. First knowledge of HTTP / 1.1
  58. First knowledge of HTTP / 1.1
  59. Webpack learning notes series 05 devserver
  60. Webpack learning notes series 04 - resource processing optimization