Sprechen Sie über das Verständnis der Offsetleft-Kompatibilität_Javascript-Fähigkeiten-js-Tutorial-php.cn

Sprechen Sie über das Verständnis der Offsetleft-Kompatibilität_Javascript-Fähigkeiten

WBOY

Freigeben： 2016-05-16 15:32:43

Original

1487 Leute haben es durchsucht

Informationen zur grundlegenden Verwendung dieses Attributs finden Sie im Kapitel Ausführliche Erläuterung der Verwendung des Offsetleft-Attributs .

Dieses Attribut weist bestimmte Kompatibilitätsprobleme auf, d. h. im IE7-Browser ist sein Rückgabewert der Abstand links vom nächsten übergeordneten Element.

<!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>

Nach dem Login kopieren

Der obige Code gibt in anderen Browsern einen Wert von 100 zurück, aber der Rückgabewert in IE7 ist 50.

Für IE6 gibt es keinen Test. Wenn Sie interessiert sind, können Sie einen Test durchführen.

Lassen Sie mich etwas Zeit nehmen, um Ihnen den Unterschied zwischen offsetLeft und style.left vorzustellen

offsetLeft ruft den linken Rand relativ zum übergeordneten Objekt ab

left ruft oder setzt den linken Rand

relativ zum übergeordneten Objekt mit Positionierungsattribut (Position wird als relativ definiert)

Wenn die Position des übergeordneten Div als relativ und die Position des untergeordneten Div als absolut definiert ist, ist der Wert von style.left des untergeordneten Div relativ zum Wert des übergeordneten Div,
Dies ist dasselbe wie offsetLeft, der Unterschied ist:

1. style.left gibt eine Zeichenfolge zurück, z. B. 28px, und offsetLeft gibt einen Wert von 28 zurück. Wenn Sie den erhaltenen Wert berechnen müssen,
Es ist bequemer, offsetLeft zu verwenden.

2. style.left ist schreibgeschützt, offsetLeft ist schreibgeschützt. Um die Position des Div zu ändern, können Sie also nur style.left ändern.

3. Der Wert von style.left muss im Voraus definiert werden, sonst ist der erhaltene Wert leer. Und es muss in HTML definiert sein. Ich habe Experimente durchgeführt, wenn es in
definiert ist In CSS ist der Wert von style.left immer noch leer. Dies ist das Problem, auf das ich am Anfang gestoßen bin. Ich kann den Wert von style.left nicht immer ermitteln.

offsetLeft kann immer noch erhalten werden, ohne die Position des Div im Voraus zu definieren.