Résumé des attributs de offset, client et scroll dans les compétences javascript_javascript

Les éléments HTML ont plusieurs attributs commençant par offset, client et scroll, qui prêtent toujours à confusion. Notez ce que vous voyez dans le livre et partagez-le avec vos amis qui en ont besoin. Principalement les attributs suivants :

Le premier groupe : offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent

Le deuxième groupe : clientWidth, clientHeight, clientLeft, clientTop

Le troisième groupe : scrollWidth, scrollHeight, scrollLeft, scrollTop

La définition détaillée est la suivante :

　1.1 Les valeurs offsetWidth et offsetHeight d'un élément HTML renvoient sa taille d'écran en pixels CSS, y compris la bordure et le remplissage de l'élément, mais pas la marge extérieure.

　1.2 Les propriétés offsetLeft et offsetTop renvoient les coordonnées X et Y de l'élément. Habituellement, leur valeur de retour est les coordonnées du document. Mais pour les descendants d'éléments positionnés et de certains autres éléments (tels que les cellules d'un tableau), les coordonnées renvoyées par ces propriétés sont relatives à l'élément ancêtre plutôt qu'au document.

　1.3 L'attribut offsetParent spécifie l'élément parent par rapport à offsetLeft et offsetTop. Si offsetParent est nul, la valeur de retour des deux derniers correspond aux coordonnées du document. Donc de manière générale, utiliser offsetLeft et offsetTop pour calculer la position de l'élément e nécessite une boucle :

//计算元素的文档坐标
function getElementPosition(e){
  var x=0,y=0;
  while(e !=null){
    x +=e.offsetLeft;
    y +=e.offsetTop;
    e=e.offsetParent; 
  }
  return {x:x, y:y} ;  
} 

La position calculée par cette méthode n'est pas toujours correcte. Il est recommandé d'utiliser la méthode intégrée getBoundingClientRect().

　2.1 clientWidth et clientHeight sont similaires aux propriétés offsetWidth et offsetHeight, sauf qu'elles n'incluent pas la taille de la bordure, uniquement le contenu et le remplissage. Dans le même temps, si le navigateur ajoute des barres de défilement entre le remplissage et la bordure, les valeurs de retour de clientWidth et clientHeight n'incluent pas les barres de défilement. Notez que clientWidth et clientHeight renvoient toujours 0 pour les éléments en ligne de type 5a8028ccc7a7e27417bff9f05adf5932, ffbe95d20f3893062224282accb13e8f et 45a2772a6b6107b401db3c9b82c049c2.

　2.2 clientLeft et clientTop renvoient les distances horizontales et verticales entre le bord extérieur du remplissage de l'élément et le bord extérieur de sa bordure. Habituellement, ces valeurs sont égales à la largeur des bordures gauche et supérieure. Mais si l'élément comporte des barres de défilement et que le navigateur fait pivoter ces barres de défilement vers la gauche ou vers le haut, elles incluent également la largeur des barres de défilement. Pour les éléments en ligne, ils sont toujours 0. Habituellement, clientLeft et clientTop sont de peu d'utilité.

　3.1 scrollWidth et scollHeight sont la taille de la zone de contenu de l'élément plus son remplissage plus tout contenu débordant. Lorsque le contenu correspond exactement à la zone de contenu sans déborder, ces propriétés sont égales à clientWidth et clientHeight. Mais lorsqu'ils débordent, ils contiennent le contenu de débordement et la valeur de retour est supérieure à clientWidth et clientHeight.

　3.2 scrollLeft et scrollTop précisent la position de la barre de défilement de l'élément. Notez que scrollLeft et scrollTop sont accessibles en écriture et que vous pouvez les configurer pour faire défiler le contenu de l'élément (les éléments HTML n'ont pas de méthode scrollTo() similaire à l'objet Window).

obj.offset[WidthHeightTopLeft] Récupère la position du contrôle par rapport au contrôle parent
event.offset[XY] prend les coordonnées de la phase de la souris dans le contrôle qui a déclenché l'événement
event.screen[XY] souris par rapport aux coordonnées de l'écran
event.client[XY] Les coordonnées de la souris par rapport à la page web sont à
obj.scroll[WidthHeightTopLeft] Obtenez la taille du défilement de l'objet
obj.client[WidthHeightTopLeft] Obtenez la taille de la zone visible de l'objet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{
font-family: "宋体";
font-size: 12px;
color: #000000;
}
#div1{
position:absolute;
background-color:#f0f0f0;
width:200px;
height:200px;
left:20px;
top:0px;
z-index:1;
}
#div2{
background-color:#cfc0cf;
width:200px;
height:210px;
position:absolute;
left:261px;
top:347px;
z-index:100;
}
#div3{
background-color:#abbfbf;
width:200px;
height:200px;
position:absolute;
left:20px;
top:247px;
z-index:100;
}
#div4{
background-color:#cfcfcf;
width:200px;
height:200px;
position:absolute;
left:461px;
top:147px;
z-index:100;
}
-->
</style>
</head>
<body>
<div id='div1' >offset 控件相对于父窗体的位置</div>
<script>
function offset(ids){
ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>";
ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>";
ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>";
ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>";
ids.innerHTML+="event.offset 鼠标相对于控件的位置<BR>";
ids.innerHTML+="offsetX ="+event.offsetX+"<BR>";
ids.innerHTML+="offsetY ="+event.offsetY+"<BR>";
}
function screen(ids){
ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>";
ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>";
ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>";
ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>";
}
function client(ids){
ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>";
ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>";
ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>";
ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>";
}
function eventc(ids){
ids.innerHTML="鼠标相对于屏幕坐标<BR>event.screenX="+event.screenX+"<BR>";
ids.innerHTML+="event.screenY ="+event.screenY+"<BR>";
ids.innerHTML+="鼠标相对于网页坐标event.clientX="+event.clientX+"<BR>";
ids.innerHTML+="event.clientY ="+event.clientY+"<BR>";
}
</script>
</body>
</html>

Chaque navigateur possède ces propriétés, et certaines valeurs peuvent être différentes.

Écrivez le code vous-même, comparez les résultats et vous comprendrez.