Maison > Article > interface Web > 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
Élément DOM object.offsetLeft //IE firefox
(jqurey) Object.offset().leftObtient 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 supprimerCe 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!