Ik wil weten hoe ik de X- en Y-positie van HTML-elementen zoals imgen divin JavaScript kan krijgen ten opzichte van het browservenster.
Antwoord 1, autoriteit 100%
De juiste aanpak is om element.getBoundingClientRect():
var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
Internet Explorer ondersteunt dit al zolang je er waarschijnlijk om geeft en het werd uiteindelijk gestandaardiseerd in CSSOM-weergaven. Alle andere browsers hebben het lang geledenovergenomen.
Sommige browsers retourneren ook eigenschappen voor hoogte en breedte, hoewel dit niet standaard is. Als je je zorgen maakt over de compatibiliteit van oudere browsers, bekijk dan de revisies van dit antwoord voor een geoptimaliseerde vernederende implementatie.
De waarden die worden geretourneerd door element.getBoundingClientRect()zijn relatief ten opzichte van de viewport. Als je het nodig hebt ten opzichte van een ander element, trek je gewoon de ene rechthoek van de andere af:
var bodyRect = document.body.getBoundingClientRect(),
elemRect = element.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
alert('Element is ' + offset + ' vertical pixels from <body>');
Antwoord 2, autoriteit 17%
De bibliotheken doen er alles aan om nauwkeurige offsets voor een element te krijgen.
Hier is een eenvoudige functie die de taak doet in alle omstandigheden die ik heb geprobeerd.
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('yourElId') ).left;
Antwoord 3, Autoriteit 15%
Deze functie retourneert de positie van een element ten opzichte van het hele document (pagina):
function getOffset(el) {
const rect = el.getBoundingClientRect();
return {
left: rect.left + window.scrollX,
top: rect.top + window.scrollY
};
}
Hiermee kunnen we de X-positie krijgen:
getOffset(element).left
… of de y-positie:
getOffset(element).top
Typescript-versie:
export type ElementOffset = {
left: number;
top: number
};
/**
* Returns an element's position relative to the whole document (page).
*
* If the element does not exist, returns O/O (top-left window corner).
*
* @example getOffset(document.getElementById('#element'));
*
* @param el
* @see https://stackoverflow.com/a/28222246/2391795
*/
export const getElementOffset = (el: Element | null): ElementOffset => {
const rect = el?.getBoundingClientRect();
return {
left: (rect?.left || 0) + window?.scrollX,
top: (rect?.top || 0) + window?.scrollY,
};
};
export default getElementOffset;
Antwoord 4, autoriteit 7%
Als je het alleen in javascript wilt doen, zijn hier enkele one linersdie gebruik maken van getBoundingClientRect()
window.scrollY + document.querySelector('#elementId').getBoundingClientRect().top // Y
window.scrollX + document.querySelector('#elementId').getBoundingClientRect().left // X
De eerste regel geeft offsetTopantwoord Y ten opzichte van document.
De tweede regel retourneert offsetLeftzeg X ten opzichte van document.
getBoundingClientRect()is een javascript-functie die de positie van het element ten opzichte van het kijkvenster van het venster retourneert.
Antwoord 5, autoriteit 3%
HTML-elementen in de meeste browsers hebben:-
offsetLeft
offsetTop
Deze specificeren de positie van het element ten opzichte van het dichtstbijzijnde bovenliggende element dat een lay-out heeft. Deze ouder is vaak toegankelijk via de eigenschap offsetParent.
IE en FF3 hebben
clientLeft
clientTop
Deze eigenschappen komen minder vaak voor, ze specificeren de positie van een element met het bovenliggende cliëntgebied (opgevuld gebied maakt deel uit van het cliëntgebied, maar rand en marge niet).
Antwoord 6, autoriteit 2%
Indien de pagina – ten minste – elke “DIV” omvat, de functie die MEOUW heeft gegeven met de “Y” -waarde die verder gaat dan de huidige paginastimieten. Om de exacte positie te vinden, moet u zowel offsetparent’s als ParentNode’s verwerken.
Probeer de onderstaande code (het wordt gecontroleerd op FF2):
var getAbsPosition = function(el){
var el2 = el;
var curtop = 0;
var curleft = 0;
if (document.getElementById || document.all) {
do {
curleft += el.offsetLeft-el.scrollLeft;
curtop += el.offsetTop-el.scrollTop;
el = el.offsetParent;
el2 = el2.parentNode;
while (el2 != el) {
curleft -= el2.scrollLeft;
curtop -= el2.scrollTop;
el2 = el2.parentNode;
}
} while (el.offsetParent);
} else if (document.layers) {
curtop += el.y;
curleft += el.x;
}
return [curtop, curleft];
};
Antwoord 7, Autoriteit 2%
U kunt twee eigenschappen toevoegen aan Element.prototypeom de bovenkant / links van elk element te krijgen.
Object.defineProperty( Element.prototype, 'documentOffsetTop', {
get: function () {
return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
}
} );
Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
get: function () {
return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
}
} );
Dit wordt zoals deze genoemd:
var x = document.getElementById( 'myDiv' ).documentOffsetLeft;
Hier is een demo waarin de resultaten worden vergeleken met offset().topen .leftvan jQuery: http://jsfiddle.net/ThinkingStiff/3G7EZ/
Antwoord 8
Om de positie ten opzichte van de pagina efficiënt op te halen, en zonder een recursieve functie te gebruiken: (inclusief IE)
var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?
document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;
Antwoord 9
Wat dacht je van zoiets, door de ID van het element door te geven en het zal links of bovenaan terugkeren, we kunnen ze ook combineren:
1) zoek links
function findLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return rec.left + window.scrollX;
} //call it like findLeft('#header');
2) vind top
function findTop(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return rec.top + window.scrollY;
} //call it like findTop('#header');
of 3) zoek links en boven samen
function findTopLeft(element) {
var rec = document.getElementById(element).getBoundingClientRect();
return {top: rec.top + window.scrollY, left: rec.left + window.scrollX};
} //call it like findTopLeft('#header');
Antwoord 10
jQuery .offset()haalt de huidige coördinaten van het eerste element op, of stelt de coördinaten in van elk element, in de set van overeenkomende elementen, relatief aan het document.
Antwoord 11
Misschien ben je beter gediend door een JavaScript-framework te gebruiken, dat functies heeft om dergelijke informatie (en nog veel meer!) op een browseronafhankelijke manier te retourneren. Hier zijn er een paar:
Met deze frameworks zou je zoiets kunnen doen als:
$('id-of-img').top
om de y-pixelcoördinaat van de afbeelding te krijgen.
Antwoord 12
/**
*
* @param {HTMLElement} el
* @return {{top: number, left: number}}
*/
function getDocumentOffsetPosition(el) {
var position = {
top: el.offsetTop,
left: el.offsetLeft
};
if (el.offsetParent) {
var parentPosition = getDocumentOffsetPosition(el.offsetParent);
position.top += parentPosition.top;
position.left += parentPosition.left;
}
return position;
}
Bedankt ThinkingStiffvoor het antwoord, dit is slechts een andere versie.
Antwoord 13
Ik heb het antwoord van @meouw genomen, toegevoegd aan de clientLeft die de rand toestaat, en heb vervolgens drie versies gemaakt:
getAbsoluteOffsetFromBody – vergelijkbaar met @meouw’s, dit krijgt de absolute positie ten opzichte van de body of het html-element van het document (afhankelijk van de quirks-modus)
getAbsoluteOffsetFromGivenElement – retourneert de absolute positie ten opzichte van het gegeven element (relativeEl). Merk op dat het gegeven element het element el moet bevatten, anders zal dit zich hetzelfde gedragen als getAbsoluteOffsetFromBody. Dit is handig als je twee elementen in een ander (bekend) element hebt (optioneel meerdere knooppunten hoger in de knooppuntenboom) en ze op dezelfde positie wilt zetten.
getAbsoluteOffsetFromRelative – retourneert de absolute positie ten opzichte van het eerste bovenliggende element met position: relative. Dit is vergelijkbaar met getAbsoluteOffsetFromGivenElement, om dezelfde reden, maar gaat alleen zo ver als het eerste overeenkomende element.
getAbsoluteOffsetFromBody = function( el )
{ // finds the offset of el from the body or html element
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft + el.clientLeft;
_y += el.offsetTop - el.scrollTop + el.clientTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
getAbsoluteOffsetFromGivenElement = function( el, relativeEl )
{ // finds the offset of el from relativeEl
var _x = 0;
var _y = 0;
while( el && el != relativeEl && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft + el.clientLeft;
_y += el.offsetTop - el.scrollTop + el.clientTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
getAbsoluteOffsetFromRelative = function( el )
{ // finds the offset of el from the first parent with position: relative
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) )
{
_x += el.offsetLeft - el.scrollLeft + el.clientLeft;
_y += el.offsetTop - el.scrollTop + el.clientTop;
el = el.offsetParent;
if (el != null)
{
if (getComputedStyle !== 'undefined')
valString = getComputedStyle(el, null).getPropertyValue('position');
else
valString = el.currentStyle['position'];
if (valString === "relative")
el = null;
}
}
return { top: _y, left: _x };
}
Als je nog steeds problemen hebt, vooral met scrollen, kun je proberen http://www.greywyvern.com te bekijken. /?post=331– Ik heb minstens één stukje twijfelachtige code opgemerkt in getStyle, wat goed zou moeten zijn, ervan uitgaande dat browsers zich gedragen, maar de rest heb ik helemaal niet getest.
Antwoord 14
als u jQuery gebruikt, is de dimensions pluginuitstekend en stelt u in staat precies te specificeren wat u wilt .
bijv.
Relatieve positie, absolute positie, absolute positie zonder opvulling, met opvulling…
Het gaat maar door, laten we zeggen dat je er veel mee kunt doen.
Bovendien is het voordeel van het gebruik van jQuery de lichte bestandsgrootte en het gebruiksgemak, je zult daarna niet meer teruggaan naar JavaScript.
Antwoord 15
Als u jQuery gebruikt, kan dit een eenvoudige oplossing zijn:
<script>
var el = $("#element");
var position = el.position();
console.log( "left: " + position.left + ", top: " + position.top );
</script>
Antwoord 16
Verschil tussen klein en klein
function getPosition( el ) {
var x = 0;
var y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
x += el.offsetLeft - el.scrollLeft;
y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: y, left: x };
}
Kijk een voorbeeld coördinaten:
http://javascript.info/tutorial/coordinates
Antwoord 17
De schoonste aanpak die ik heb gevonden, is een vereenvoudigde versie van de techniek die wordt gebruikt door jQuery’s offset. Net als bij sommige andere antwoorden begint het met getBoundingClientRect; het gebruikt dan het windowen het documentElementom de scrollpositie aan te passen, evenals zaken als de marge op de body(vaak de standaard).
var rect = el.getBoundingClientRect();
var docEl = document.documentElement;
var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;
Antwoord 18
Dit is de beste code die ik heb kunnen maken (werkt ook in iframes, in tegenstelling tot jQuery’s offset()). Het lijkt erop dat webkit een beetje ander gedrag vertoont.
Gebaseerd op de opmerking van meouw:
function getOffset( el ) {
var _x = 0;
var _y = 0;
while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
// chrome/safari
if ($.browser.webkit) {
el = el.parentNode;
} else {
// firefox/IE
el = el.offsetParent;
}
}
return { top: _y, left: _x };
}
Antwoord 19
Hoewel dit hoogstwaarschijnlijk verloren gaat onderaan zoveel antwoorden, werkten de beste oplossingen hier niet voor mij.
Voor zover ik kon nagaan, zou geen van de andere antwoorden hebben geholpen.
Situatie:
Op een HTML5-pagina had ik een menu dat een nav-element was in een koptekst (niet DE koptekst maar een koptekst in een ander element).
Ik wilde dat de navigatie bovenaan bleef staan zodra een gebruiker ernaartoe scrolde, maar daarvoor was de koptekst absoluut gepositioneerd (zodat ik hem iets anders kon laten overlappen).
De bovenstaande oplossingen brachten nooit een verandering teweeg omdat .offsetTop niet zou veranderen omdat dit een absoluut gepositioneerd element was. Bovendien was de eigenschap .scrollTop gewoon de top van het bovenste element… dat wil zeggen 0 en zou altijd 0 zijn.
Alle tests die ik heb uitgevoerd met deze twee (en hetzelfde met getBoundingClientRect-resultaten) zouden me niet vertellen of de bovenkant van de navigatiebalk ooit naar de bovenkant van de zichtbare pagina scrolde (nogmaals, zoals gerapporteerd in de console, bleven ze gewoon dezelfde nummers tijdens het scrollen heeft plaatsgevonden).
Oplossing
De oplossing voor mij was het gebruik van
window.visualViewport.pageTop
De waarde van de eigenschap pageTop geeft het zichtbare gedeelte van het scherm weer, waardoor ik kan volgen waar een element zich bevindt ten opzichte van de grenzen van het zichtbare gebied.
Waarschijnlijk onnodig om te zeggen, wanneer ik te maken heb met scrollen, verwacht ik deze oplossing te gebruiken om programmatisch te reageren op beweging van elementen die worden gescrolld.
Hoop dat het iemand anders helpt.
BELANGRIJKE OPMERKING: Dit lijkt te werken in Chrome en Opera momenteel & zeker niet in Firefox (6-2018)… totdat Firefox visualViewport ondersteunt, raad ik aan deze methode NIET te gebruiken (en ik hoop dat ze dat snel zullen doen… het is veel logischer dan de rest).
UPDATE:
Even een opmerking over deze oplossing.
Terwijl ik nog steeds vind wat ik heb ontdekt erg waardevol te zijn voor situaties waarin “…programmatisch reageren op beweging van elementen die worden gescrolld.” is toepasbaar. De betere oplossing voor het probleem dat ik had was om CSS te gebruiken om position: stickyin te stellen op het element. Als u sticky gebruikt, kunt u een element bovenaan laten staan zonder javascript te gebruiken (LET OP: soms werkt dit niet zo effectief als het wijzigen van het element naar fixed, maar voor de meeste toepassingen zal de sticky-benadering waarschijnlijk superieur zijn)
UPDATE01:
Dus ik realiseerde me dat ik voor een andere pagina een vereiste had waarbij ik de positie van een element moest detecteren in een licht complexe scrolconfiguratie (parallax plus elementen die voorbij scrollen als onderdeel van een bericht).
Ik realiseerde me in dat scenario dat het volgende de waarde bood die ik gebruikte om te bepalen wanneer ik iets moest doen:
let bodyElement = document.getElementsByTagName('body')[0];
let elementToTrack = bodyElement.querySelector('.trackme');
trackedObjPos = elementToTrack.getBoundingClientRect().top;
if(trackedObjPos > 264)
{
bodyElement.style.cssText = '';
}
Ik hoop dat dit antwoord nu breder bruikbaar is.
Antwoord 20
Om de totale verschuiving van een element te krijgen, kunt u recursief alle bovenliggende verschuivingen optellen:
function getParentOffsets(el): number {
if (el.offsetParent) {
return el.offsetParent.offsetTop + getParentOffset(el.offsetParent);
} else {
return 0;
}
}
met deze utility-functie is de totale top offset van een dom element:
el.offsetTop + getParentOffsets(el);
Antwoord 21
Ik deed het zo, dus het was compatibel met oude browsers.
// For really old browser's or incompatible ones
function getOffsetSum(elem) {
var top = 0,
left = 0,
bottom = 0,
right = 0
var width = elem.offsetWidth;
var height = elem.offsetHeight;
while (elem) {
top += elem.offsetTop;
left += elem.offsetLeft;
elem = elem.offsetParent;
}
right = left + width;
bottom = top + height;
return {
top: top,
left: left,
bottom: bottom,
right: right,
}
}
function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop;
var clientLeft = docElem.clientLeft;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
var bottom = top + (box.bottom - box.top);
var right = left + (box.right - box.left);
return {
top: Math.round(top),
left: Math.round(left),
bottom: Math.round(bottom),
right: Math.round(right),
}
}
function getOffset(elem) {
if (elem) {
if (elem.getBoundingClientRect) {
return getOffsetRect(elem);
} else { // old browser
return getOffsetSum(elem);
}
} else
return null;
}
Meer over coördinaten in JavaScript vindt u hier: http://javascript.info/tutorial/coordinates
Antwoord 22
HTML program to show (x, y) of an
element by dragging mouse over it you just copied it and use it on your own
<!DOCTYPE html>
<html>
<head>
<title>
position of an element
</title>
<!-- scropt to get position -->
<script type = "text/javascript">
function getPositionXY(element) {
var rect = element.getBoundingClientRect();
document.getElementById('text').innerHTML
= 'X: ' + rect.x + '<br>' + 'Y: ' + rect.y;
}
</script>
</head>
<body>
<p>Move the mouse over the text</p>
<div onmouseover = "getPositionXY(this)">
Position:
<p id = 'text'></p>
</div>
</body>
</html> Antwoord 23
Ik heb met succes Andy E’s oplossing gebruikt om een bootstrap 2 modal te positioneren, afhankelijk van op welke link in een tabelrij een gebruiker klikt. De pagina is een Tapestry 5-pagina en het onderstaande javascript is geïmporteerd in de java-paginaklasse.
javascript:
function setLinkPosition(clientId){
var bodyRect = document.body.getBoundingClientRect(),
elemRect = clientId.getBoundingClientRect(),
offset = elemRect.top - bodyRect.top;
offset = offset + 20;
$('#serviceLineModal').css("top", offset);
}
Mijn modale code:
<div id="serviceLineModal" class="modal hide fade add-absolute-position" data-backdrop="static"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:50%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<t:zone t:id="modalZone" id="modalZone">
<p>You selected service line number: ${serviceLineNumberSelected}</p>
</t:zone>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<!-- <button class="btn btn-primary">Save changes</button> -->
</div>
De link in de loop:
<t:loop source="servicesToDisplay" value="service" encoder="encoder">
<tr style="border-right: 1px solid black;">
<td style="white-space:nowrap;" class="add-padding-left-and-right no-border">
<a t:type="eventLink" t:event="serviceLineNumberSelected" t:context="service.serviceLineNumber"
t:zone="pageZone" t:clientId="modalLink${service.serviceLineNumber}"
onmouseover="setLinkPosition(this);">
<i class="icon-chevron-down"></i> <!-- ${service.serviceLineNumber} -->
</a>
</td>
En de Java-code in de paginaklasse:
void onServiceLineNumberSelected(String number){
checkForNullSession();
serviceLineNumberSelected = number;
addOpenServiceLineDialogCommand();
ajaxResponseRenderer.addRender(modalZone);
}
protected void addOpenServiceLineDialogCommand() {
ajaxResponseRenderer.addCallback(new JavaScriptCallback() {
@Override
public void run(JavaScriptSupport javascriptSupport) {
javascriptSupport.addScript("$('#serviceLineModal').modal('show');");
}
});
}
Ik hoop dat dit iemand helpt, dit bericht heeft geholpen.
Antwoord 24
Na veel onderzoek en testen lijkt dit te werken
function getPosition(e) {
var isNotFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') == -1);
var x = 0, y = 0;
while (e) {
x += e.offsetLeft - e.scrollLeft + (isNotFirefox ? e.clientLeft : 0);
y += e.offsetTop - e.scrollTop + (isNotFirefox ? e.clientTop : 0);
e = e.offsetParent;
}
return { x: x + window.scrollX, y: y + window.scrollY };
}
zie http://jsbin.com/xuvovalifo/edit?html,js,output
Antwoord 25
Ik dacht ik gooi dit er ook even bij.
Ik heb het niet kunnen testen in oudere browsers, maar het werkt in de nieuwste van de top 3. 🙂
Element.prototype.getOffsetTop = function() {
return ( this.parentElement )? this.offsetTop + this.parentElement.getOffsetTop(): this.offsetTop;
};
Element.prototype.getOffsetLeft = function() {
return ( this.parentElement )? this.offsetLeft + this.parentElement.getOffsetLeft(): this.offsetLeft;
};
Element.prototype.getOffset = function() {
return {'left':this.getOffsetLeft(),'top':this.getOffsetTop()};
};
Antwoord 26
Dit is eenvoudig als twee regels in JS :
var elem = document.getElementById("id");
alert(elem.getBoundingClientRect());
Antwoord 27
Omdat verschillende browsers randen, opvulling, marges en dergelijke op verschillende manieren weergeven. Ik heb een kleine functie geschreven om de bovenste en linkerpositie van een specifiek element op te halen in elk hoofdelement dat je wilt in een precieze dimensie:
function getTop(root, offset) {
var rootRect = root.getBoundingClientRect();
var offsetRect = offset.getBoundingClientRect();
return offsetRect.top - rootRect.top;
}
Voor het ophalen van de linkerpositie moet u terugkeren:
return offsetRect.left - rootRect.left;
Antwoord 28
Krijg positie van DIV-respect voor links en bovenkant
var elm = $('#div_id'); //get the div
var posY_top = elm.offset().top; //get the position from top
var posX_left = elm.offset().left; //get the position from left