简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

js gets the absolute position of an element in the browser_javascript skills

WBOY
Release： 2016-05-16 18:22:28
Original
1364 people have browsed it

JavaScript provides attributes for obtaining the position of HTML elements:

HTMLElement.offsetLeft
HTMLElement.offsetHeight
However, it should be noted that the values ​​stored in these two attributes are not the relative values ​​of the element to the entire browser. The absolute position of the canvas, but the relative position relative to the position of its parent element, that is to say, these two values ​​​​are calculated based on the upper left corner of the parent element being the (0,0) point. So how to get the absolute position of an HTML element? You can use the following function:

Copy code The code is as follows:

//Get the vertical coordinate of the element
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset =getTop(e .offsetParent);
return offset;
}
//Get the abscissa coordinate of the element
function getLeft(e){
var offset=e.offsetLeft;
if(e. offsetParent!=null) offset =getLeft(e.offsetParent);
return offset;
}

The principle is to use the HTMLElement.offsetParent attribute, if the parent element of the current element is not empty (null), then add the current offsetTop to the original offsetTop, then continue to obtain the offsetTop of the parent element's parent element, then add it, and finally recurse the ordinate of the element relative to the entire browser canvas. The same goes for the abscissa.
Related labels：
Browser
source：php.cn
Previous article：Text scrolling marquee plug-in based on Jquery (multiple scrolling areas on one page)_jquery Next article：Chinese problem with Remote validation in JQuery's Validation plug-in_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
9
1588
In mobile view, how can I close this navigation bar when the user clicks on the link? When the user clicks a link to browse the website, the navigation bar does not close? I've...
From 2024-04-06 19:23:03
0
1
411
Unable to get input element from website So I'm trying to get an input element from Twitter, but when I run it it keeps giving me a...
From 2024-04-06 18:59:57
0
1
442
Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
From 2024-04-06 17:46:54
0
1
355
Open calculation documents using window.open() and data: scheme I have a web page that runs in a browser that generates a calculated HTML document that I ...
From 2024-04-06 15:06:34
0
1
378
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！