cari

Rumah >hujung hadapan web >tutorial js >Bercakap tentang pemahaman kemahiran offsetleft compatibility_javascript

Bercakap tentang pemahaman kemahiran offsetleft compatibility_javascript

WBOY
WBOYasal
2016-05-16 15:32:431486semak imbas

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Dapatkan nilai Radio yang dipilih dalam JavaScript_Form kesan khasArtikel seterusnya：Dapatkan nilai Radio yang dipilih dalam JavaScript_Form kesan khas

Artikel berkaitan

Lihat lagi