Parler de la compréhension des compétences offsetleft compatibilité

Parler de la compréhension des compétences offsetleft compatibilité_javascript

WBOY

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

original

1466 Les gens l'ont consulté

Pour l'utilisation de base de cet attribut, veuillez vous référer au chapitre Explication détaillée de l'utilisation de l'attribut offsetleft .

Cet attribut présente certains problèmes de compatibilité, c'est-à-dire que dans le navigateur IE7, sa valeur de retour est la distance à gauche de l'élément parent le plus proche.

<!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 renvoie une valeur de 100 dans d'autres navigateurs, mais la valeur de retour dans IE7 est de 50.

Comme pour IE6, il n'y a pas de test. Si vous êtes intéressé, vous pouvez faire un test.

Laissez-moi prendre un peu de temps pour vous présenter la différence entre offsetLeft et style.left

offsetLeft obtient la marge gauche par rapport à l'objet parent

left obtient ou définit la marge gauche

par rapport à l'objet parent avec l'attribut de positionnement (la position est définie comme relative)

Si la position du div parent est définie comme relative et la position du div enfant est définie comme absolue, alors la valeur de style.left du div enfant est relative à la valeur du div parent,
C'est la même chose que offsetLeft, la différence est :

1. style.left renvoie une chaîne, telle que 28px, et offsetLeft renvoie une valeur de 28. Si vous devez calculer la valeur obtenue,
Il est plus pratique d'utiliser offsetLeft.

2. style.left est en lecture-écriture, offsetLeft est en lecture seule, donc pour changer la position du div, vous ne pouvez modifier que style.left.

3. La valeur de style.left doit être définie à l'avance, sinon la valeur obtenue sera vide. Et il doit être défini en html. J'ai fait des expériences s'il est défini en
. En CSS, la valeur de style.left est toujours vide. C'est le problème que j'ai rencontré au début. Je n'arrive pas toujours à obtenir la valeur de style.left.

offsetLeft peut toujours être obtenu sans définir la position du div à l'avance.