js obtient la distance entre l'élément de page et le haut de l'espace de travail du navigateur

Cet article présente principalement la distance entre l'élément de la page d'acquisition js et le haut de l'espace de travail du navigateur. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

. Introduisez d'abord quelques attributs : (Seuls IE et Firefox ont été testés pour le moment. En fait, Chrome est ce que j'utilise le plus dans mon travail)

La hauteur/largeur du enroulé page Web (c'est-à-dire après le défilement de la barre de défilement du navigateur) Hauteur du contenu de la page masquée)

(javascript) document.documentElement.scrollTop // firefox

(javascript) document.documentElement.scrollLeft //firefox

(javascript)  document.body.scrollTop //IE

(javascript) document. body.scrollLeft //IE

(jqurey) $(window).scrollTop()

(jqurey)                                                                                                    (javascript)                                                                             Valeurs de décalage haut et gauche

(javascript) Objet élément DOM. offsetTop //IE firefox

(javascript)

Élément DOM object.offsetLeft //IE firefox

(jqurey) Object.offset().left

Obtient la distance entre l'élément de page et le haut de l'espace de travail du navigateur

La distance entre l'élément de page et le haut de l'espace de travail du navigateur = La distance entre l'élément et le document Top offset value - La hauteur de la page Web enroulée
soit :

La distance entre l'élément de page et le haut de l'espace de travail du navigateur

= Élément DOM object.offsetTop -

document.documentElement.scrollTop

Un exemple d'application : (je suis habitué à utiliser jqurey pour éviter les soucis de compatibilité) Utilisez la distance entre l'élément de page et l'extrémité supérieure/gauche de l'espace de travail du navigateur pour implémenter une boîte d'invite afin de garantir la position correcte des informations d'invite à différents endroits de la page, comme montré dans la figure avec le code

On peut voir que peu importe où se trouve la zone de saisie, les informations de la boîte d'invite seront toujours affichées dans le position correcte et ne sera pas bloqué lorsque la boîte de dialogue apparaît

code (la page html de l'exemple ci-dessus doit citer jquery-1.8.2.min.js)

Ce qui précède est tout le contenu de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois ! Recommandations associées : Méthode js pour obtenir le nom de domaine actuel, l'URL, le chemin relatif et les paramètres et spécifier les paramètres

js Native faites glisser votre doigt vers la gauche pour supprimer

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!