Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang penggunaan atribut offsetleft dalam kemahiran javascript_javascript

Penjelasan terperinci tentang penggunaan atribut offsetleft dalam kemahiran javascript_javascript

WBOYasal: 2016-05-16 15:32:441760semak imbas

Atribut ini boleh mengembalikan jarak antara elemen semasa dan tepi kiri elemen induk Sudah tentu, elemen induk ini juga khusus.

(1). Jika terdapat elemen kedudukan dalam elemen induk, maka jarak ke tepi elemen kedudukan yang paling hampir dengan elemen semasa dikembalikan.
(2). Jika tiada elemen kedudukan dalam elemen induk, maka jarak relatif ke tepi kiri badan dikembalikan.

Struktur tatabahasa:

obj.offsetleft

Nota khas: Atribut ini adalah baca sahaja dan tidak boleh diberikan nilai.

Contoh kod:

<!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 boleh mengembalikan jarak antara elemen dalam dan sebelah kiri elemen utama, kerana elemen utama ialah elemen induk diposisikan pertama.

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

Kod di atas mengembalikan saiz elemen dalam dari sebelah kiri elemen badan.

Atribut ini mempunyai isu keserasian tertentu untuk mendapatkan butiran, sila rujuk bab Pengenalan ringkas kepada keserasian offsetleft .

ps: Apakah peranan khusus atribut offsetLeft dalam js?

Anda boleh menentukan jarak kiri antara objek dan dokumen, iaitu tepi kiri penyemak imbas. Contohnya, jika anda menulis div dan mendapatkan div, anda boleh menggunakan makluman (div.offsetLeft anda) untuk melihat jarak semasanya dari sebelah kiri penyemak imbas. Sudah tentu, anda juga boleh menggunakannya untuk menetapkan nilai kepada objek Offset bukan sahaja Kiri tetapi juga offsetTop, offsetWidth dan offsetHeight, yang kesemuanya adalah sifat yang sangat berguna dalam JS.

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：JavaScript kod pelaksanaan bar menu boleh ditarik balik kemahiran javascriptArtikel seterusnya：JavaScript kod pelaksanaan bar menu boleh ditarik balik kemahiran javascript

Artikel berkaitan

Lihat lagi