Méthodes Js et Jq pour obtenir des valeurs de navigateur et d'objet compétences _javascript

JS et Jquery peuvent tous deux 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 ? Quelles sont les différences dans les méthodes d'écriture ? 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 (remplissage) et la bordure (border)
obj.outerWidth(true) ==> Obtenez la largeur de l'élément, y compris la bordure extérieure (marge)

wLe même élément doit ê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 est la méthode introduite par l'éditeur pour obtenir les valeurs du navigateur et des objets​​en Js et Jq. J'espère que cela sera utile à tout le monde !