1
votes

Comment obtenir la propriété d'une balise HTML?

J'essaie d'obtenir la propriété d'une balise html à partir de la fenêtre 'inspect element' de chrome, j'utilise jQuery.

Chrome inspect Property

J'ai déjà essayé les codes suivants ci-dessous

$("img#picture").attr("offsetTop");

$("img#picture").offset().top;

javascript jquery html

4 commentaires

la seule chose que je peux penser est que votre élément n'est pas affiché: "jQuery ne prend pas en charge l'obtention des coordonnées de décalage des éléments masqués ou la prise en compte des marges définies sur l'élément de document . Bien qu'il soit possible d'obtenir les coordonnées des éléments avec visibilité: ensemble caché, affichage: aucun n'est exclu de l'arborescence de rendu et a donc une position indéfinie. " src: api.jquery.com/offset

et assurez-vous que chaque balise img a un id unique pour elle

Ce n'est pas la cause de votre problème, mais il convient de souligner que votre sélecteur img # picture est inutilement complexe, si vous sélectionnez un élément par son ID, vous n'avez jamais besoin d'autres détails ( car il ne peut y avoir qu'un seul élément avec cet ID) donc #picture suffit.

Toutes les méthodes que vous avez décrites dans la question fonctionnent correctement. Recherchez des erreurs dans la console et assurez-vous que vous avez correctement chargé jQuery dans la page et que vous exécutez votre code dans un gestionnaire d'événements document.ready.

4 Réponses :

2
votes

utilisez la propriété d'élément natif:

$("img#picture")[0].offsetTop

Voir aussi https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

2 commentaires

Si les exemples OP ne fonctionnent pas (quand ils devraient), cela ne fonctionnera pas non plus.

Hmmm, Désolé mais console.log ($ ("# picture") [0] .offsetTop); affiche toujours 0 sur la console, je vais essayer les autres

0
votes

Ce sont des moments comme ceux-ci où vous devriez vous demander si vous devriez utiliser du Javascript ou jQuery vanille.

Dans tous les cas:

// vanilla JS
let offsetTop = document.querySelector("img#picture").offsetTop;
console.log(offsetTop);

// jQuery
let offsetTop = $("img#picture")[0].offsetTop;
console.log(offsetTop);

0 commentaires

0
votes

Voici de meilleurs endroits pour appeler votre fonction

var d = document.getElementById("div1");
var topPos = d.offsetTop;

Jquery:

var image = $ ("img"); var offset = image.offset ();

console.log ("left:" + offset.left + ", top:" + offset.top);

JS:

<body onload="script();">
or

document.onload = function ...
or even

window.onload = function ...

0 commentaires

0
votes

OffsetTop n'est pas un attribut HTML. C'est la propriété d'un objet. Jquery ne renvoie pas la propriété de l'objet. Il ne renvoie que le nœud DOM.

Utilisation de vanilla

var a = $("img#picture");
console.log(a.offsetTop);

Utilisation de jQuery

var a = document.querySelector("img#picture");
console.log(a[0].offsetTop);

0 commentaires