Bercakap tentang pemahaman kemahiran offsetleft compatibility

Bercakap tentang pemahaman kemahiran offsetleft compatibility_javascript

WBOY

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

asal

1466 orang telah melayarinya

Untuk penggunaan asas atribut ini, sila rujuk bab Penjelasan terperinci tentang penggunaan atribut offsetleft .

Atribut ini mempunyai isu keserasian tertentu, iaitu, dalam pelayar IE7, nilai pulangannya ialah jarak di sebelah kiri elemen induk terdekat.

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

Salin selepas log masuk

Kod di atas mengembalikan nilai 100 dalam penyemak imbas lain, tetapi nilai pulangan dalam IE7 ialah 50.

Bagi IE6, tiada ujian Jika anda berminat, anda boleh melakukan ujian.

Izinkan saya mengambil sedikit masa untuk memperkenalkan kepada anda perbezaan antara offsetLeft dan style.left

offsetLeft mendapat jidar kiri berbanding objek induk

kiri mendapat atau menetapkan jidar kiri

relatif kepada objek induk dengan atribut kedudukan (kedudukan ditakrifkan sebagai relatif)

Jika kedudukan div induk ditakrifkan sebagai relatif dan kedudukan div anak ditakrifkan sebagai mutlak, maka nilai style.left div anak adalah relatif kepada nilai div induk,
Ini sama seperti offsetLeft, perbezaannya ialah:

1. style.left mengembalikan rentetan, seperti 28px dan offsetLeft mengembalikan nilai 28. Jika anda perlu mengira nilai yang diperoleh,
Ia lebih mudah untuk menggunakan offsetLeft.

2. style.left ialah baca-tulis, offsetLeft ialah baca-sahaja, jadi untuk menukar kedudukan div, anda hanya boleh mengubah suai style.left.

3. Nilai style.left perlu ditakrifkan terlebih dahulu, jika tidak, nilai yang diperolehi akan menjadi kosong. Dan ia mesti ditakrifkan dalam html Saya telah melakukan eksperimen Jika ia ditakrifkan dalam
Dalam css, nilai style.left masih kosong. Ini adalah masalah yang saya hadapi pada mulanya.

offsetLeft masih boleh diperolehi tanpa menentukan kedudukan div terlebih dahulu.