Explication détaillée de l'utilisation de l'attribut offsetleft dans les compétences javascript

Explication détaillée de l'utilisation de l'attribut offsetleft dans les compétences javascript_javascript

WBOY

Libérer： 2016-05-16 15:32:44

original

1761 Les gens l'ont consulté

Cet attribut peut renvoyer la distance entre l'élément courant et le bord gauche d'un élément parent Bien entendu, cet élément parent est également particulier.

(1). S'il y a un élément positionné dans l'élément parent, alors la distance jusqu'au bord de l'élément positionné le plus proche de l'élément actuel est renvoyée.
(2). S'il n'y a pas d'élément de positionnement dans l'élément parent, alors la distance par rapport au bord gauche du corps est renvoyée.

Structure grammaticale :

obj.offsetleft

Remarque : cet attribut est en lecture seule et aucune valeur ne peut lui être attribuée.

Exemple de code :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 position:absolute;
 left:100px;
 top:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 margin:50px; 
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

Copier après la connexion

Le code ci-dessus peut renvoyer la distance entre l'élément interne et le côté gauche de l'élément principal, car l'élément principal est le premier élément parent positionné.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
*{
 margin: 0px;
 padding: 0px;
}
#main{
 width:300px;
 height:300px;
 background:red;
 margin:100px;
}
#box{
 width:200px;
 height:200px;
 background:blue;
 overflow:hidden;
}
#inner{
 width:50px;
 height:50px;
 background:green;
 text-align:center;
 line-height:50px;
 margin:50px;
}
</style>
<script type="text/javascript">
window.onload=function(){
 var inner=document.getElementById("inner");
 inner.innerHTML=inner.offsetLeft;
}
</script>
</head>
<body>
<div id="main">
 <div id="box">
 <div id="inner"></div>
 </div>
</div>
</body>
</html>

Copier après la connexion

Le code ci-dessus renvoie la taille de l'élément interne du côté gauche de l'élément body.

Cet attribut présente certains problèmes de compatibilité. Pour plus de détails, veuillez vous référer au chapitre Une brève introduction à la compatibilité offsetleft .

ps : Quel est le rôle spécifique de l'attribut offsetLeft dans js ?

Vous pouvez déterminer la distance gauche entre un objet et le document, qui est le bord gauche du navigateur. Par exemple, si vous écrivez un div et obtenez le div, vous pouvez utiliser alert (votre div.offsetLeft) pour voir sa distance actuelle depuis le côté gauche du navigateur. Bien sûr, vous pouvez également l'utiliser pour attribuer des valeurs aux objets. Offset n'est pas seulement Left mais aussi offsetTop, offsetWidth et offsetHeight, qui sont toutes des propriétés très utiles dans JS.