Comparaison des méthodes et des différences entre Js et Jq pour obtenir les valeurs des éléments de page_jquery

JS et Jquery peuvent obtenir la largeur, la hauteur et le déplacement relatif des éléments de la page Peuvent-ils être convertis ou remplacés les uns par les autres ? Cet article vous le présentera en détail.

1.Js obtient la hauteur et la largeur du navigateur

document.documentElement.clientWidth ==> Largeur de la zone visible dans le navigateur
document.documentElement.clientHeight ==> Hauteur de la zone visible dans le navigateur
document.body.clientWidth ==> largeur de l'objet BODY
document.body.clientHeight ==> hauteur de l'objet BODY

Jq obtient la hauteur et la largeur du navigateur

$(window).width() ==> Largeur de la zone visible du navigateur
$(window).height() ==> Hauteur de la zone visible dans le navigateur
$(document).height() ==> Hauteur de la page du document
$(document.body).height() ==> hauteur de l'objet BODY

2.Js obtient la hauteur et la largeur de l'objet

obj.width = obj.style.width
obj.clientWidth = width padding ==> Obtenez la largeur de l'élément, y compris la bordure intérieure (padding)
obj.offsetHeight = height padding border ==> Obtenez la hauteur de l'élément, y compris la bordure intérieure (padding) et la bordure (border)

Jq obtient la hauteur et la largeur de l'objet

obj.innerWidth() ==> Obtenez la largeur de l'élément, y compris la bordure intérieure (remplissage),
obj.outerWidth() ==> Obtenez la largeur de l'élément, y compris la limite intérieure (rembourrage) et la bordure (bordure)
obj.outerWidth(true) ==> Obtenez la largeur de l'élément, y compris la bordure extérieure (marge)
Le même élément w devrait être : width()<=innerWidth()<=outerWidth()<=outerWidth(true);

3.Js Obtenez la hauteur et la largeur relatives de l'objet

obj.offsetLeft ==> La gauche de l'élément par rapport à l'élément parent
obj.offsettop ==> Le sommet
de l'élément par rapport à l'élément parent obj.scrollWidth ==> Obtenez la largeur de défilement de l'objet
obj.scrollHeight ==> Obtenez la hauteur de défilement de l'objet
obj.scrollLeft ==> Définir ou obtenir la distance de défilement à l'extrémité gauche de l'objet
obj.scrollTop ==> Définir ou obtenir la distance de défilement en haut de l'objet

Jq obtient la hauteur et la largeur relatives de l'objet

obj.offset().left ==> L'élément est relatif à la gauche du document
obj.offset().top ==> L'élément est relatif au haut
du document obj.scrollLeft() ==> Définit ou renvoie le décalage de l'objet par rapport au côté gauche de la barre de défilement.
obj.scrollTop() ==> Définit ou renvoie le décalage de l'objet par rapport au haut de la barre de défilement.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.