Penjelasan terperinci tentang penggunaan atribut offsetleft dalam kemahiran javascript

Penjelasan terperinci tentang penggunaan atribut offsetleft dalam kemahiran javascript_javascript

WBOY

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

asal

1826 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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.