Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > js获取元素在浏览器中的绝对位置_javascript技巧

js获取元素在浏览器中的绝对位置_javascript技巧

WBOY
Freigeben： 2016-05-16 18:22:28
Original
1395 Leute haben es durchsucht

JavaScript中提供获取HTML元素位置的属性：

HTMLElement.offsetLeft
HTMLElement.offsetHeight
但 是需要注意的是，这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置，而是相对于其父元素位置的相对位置，也就是说这两个数值得到的是以其 父元素左上角为(0,0)点从而计算出的数值。那么如何得到一个HTML元素的绝对位置呢，可以用以下函数：

复制代码 代码如下:

//获取元素的纵坐标
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

其原理就是利用HTMLElement.offsetParent属性，如果当前元素的父元素不是空（null），则在原本的offsetTop基础上加上当前的offsetTop，然后继续获取父元素的父元素的offsetTop，再将其加之，最终递归出该元素相对于整个浏览器画布的纵坐标。横坐标亦然。
Verwandte Etiketten：
浏览器
Quelle：php.cn
Vorheriger Artikel：基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)_jquery Nächster Artikel：JQuery的Validation插件中Remote验证的中文问题_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
9
1588
Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt? Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigatio...
Aus 2024-04-06 19:23:03
0
1
411
Das Eingabeelement konnte nicht von der Website abgerufen werden Ich versuche also, ein Eingabeelement von Twitter abzurufen, aber wenn ich es ausführe, er...
Aus 2024-04-06 18:59:57
0
1
442
Generieren Sie Standardwerte und CSS-Variablen mit SCSS Ich setze Website-Styling um. Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest...
Aus 2024-04-06 17:46:54
0
1
355
Öffnen Sie Berechnungsdokumente mit window.open() und data: scheme Ich habe eine Webseite, die in einem Browser ausgeführt wird, der ein berechnetes HTML-Dok...
Aus 2024-04-06 15:06:34
0
1
378
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage