Elemen HTML mempunyai beberapa atribut bermula dengan offset, klien dan tatal, yang sentiasa mengelirukan. Tulis apa yang anda lihat dalam buku dan kongsi dengan rakan-rakan yang memerlukannya. Terutamanya atribut berikut:
Kumpulan pertama: offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent
Kumpulan kedua: clientWidth, clientHeight, clientLeft, clientTop
Kumpulan ketiga: scrollWidth, scrollHeight, scrollLeft, scrollTop
Definisi terperinci adalah seperti berikut:
1.1 OffsetWidth dan offsetHeight bagi elemen HTML mengembalikan saiz skrinnya dalam piksel CSS, termasuk sempadan dan padding elemen, tetapi bukan jidar luar.
1.2 Sifat offsetLeft dan offsetTop mengembalikan koordinat X dan Y bagi elemen. Biasanya, nilai pulangan mereka ialah koordinat dokumen. Tetapi untuk keturunan unsur kedudukan dan beberapa elemen lain (seperti sel jadual), koordinat yang dikembalikan oleh sifat ini adalah relatif kepada elemen nenek moyang dan bukannya dokumen.
1.3 Atribut offsetParent menentukan elemen induk berbanding dengan offsetLeft dan offsetTop. Jika offsetParent adalah nol, nilai pulangan dua yang terakhir ialah koordinat dokumen. Jadi secara umumnya, menggunakan offsetLeft dan offsetTop untuk mengira kedudukan elemen e memerlukan gelung:
//计算元素的文档坐标
function getElementPosition(e){
var x=0,y=0;
while(e !=null){
x +=e.offsetLeft;
y +=e.offsetTop;
e=e.offsetParent;
}
return {x:x, y:y} ;
}
Kedudukan yang dikira oleh kaedah ini tidak selalunya betul Adalah disyorkan untuk menggunakan kaedah getBoundingClientRect() terbina dalam.
2.1 clientWidth dan clientHeight adalah serupa dengan sifat offsetWidth dan offsetHeight, kecuali ia tidak termasuk saiz sempadan, hanya kandungan dan padding. Pada masa yang sama, jika penyemak imbas menambah bar skrol antara padding dan sempadan, nilai pulangan clientWidth dan clientHeight tidak termasuk bar skrol. Ambil perhatian bahawa clientWidth dan clientHeight sentiasa mengembalikan 0 untuk elemen sebaris jenis ,
2.2 clientLeft dan clientTop mengembalikan jarak mendatar dan menegak antara tepi luar padding elemen dan tepi luar sempadannya Biasanya nilai ini sama dengan lebar sempadan kiri dan atas. Tetapi jika elemen itu mempunyai bar skrol dan penyemak imbas memutar bar skrol tersebut ke kiri atau atas, ia juga termasuk lebar bar skrol. Untuk elemen sebaris, ia sentiasa 0. Biasanya clientLeft dan clientTop tidak banyak digunakan.
3.1 scrollWidth dan scollHeight ialah saiz kawasan kandungan elemen serta pelapiknya serta sebarang kandungan yang melimpah. Apabila kandungan betul-betul sepadan dengan kawasan kandungan tanpa melimpah, sifat ini adalah sama dengan clientWidth dan clientHeight. Tetapi apabila ia melimpah, ia mengandungi kandungan limpahan, dan nilai pulangan adalah lebih besar daripada clientWidth dan clientHeight.
3.2 tatalKiri dan tatalAtas tentukan kedudukan bar tatal elemen. Ambil perhatian bahawa scrollLeft dan scrollTop boleh ditulis dan anda boleh menetapkannya untuk menatal kandungan dalam elemen (elemen HTML tidak mempunyai kaedah scrollTo() yang serupa dengan objek Window).
obj.offset[WidthHeightTopLeft] Dapatkan kedudukan kawalan berbanding dengan kawalan induk
event.offset[XY] mengambil koordinat fasa tetikus dalam kawalan yang mencetuskan acara
event.screen[XY] tetikus relatif kepada koordinat skrin
event.client[XY] Koordinat tetikus relatif kepada halaman web berada di
obj.scroll[WidthHeightTopLeft] Dapatkan saiz tatal objek
obj.client[WidthHeightTopLeft] Dapatkan saiz kawasan objek yang boleh dilihat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
div{
font-family: "宋体";
font-size: 12px;
color: #000000;
}
#div1{
position:absolute;
background-color:#f0f0f0;
width:200px;
height:200px;
left:20px;
top:0px;
z-index:1;
}
#div2{
background-color:#cfc0cf;
width:200px;
height:210px;
position:absolute;
left:261px;
top:347px;
z-index:100;
}
#div3{
background-color:#abbfbf;
width:200px;
height:200px;
position:absolute;
left:20px;
top:247px;
z-index:100;
}
#div4{
background-color:#cfcfcf;
width:200px;
height:200px;
position:absolute;
left:461px;
top:147px;
z-index:100;
}
-->
</style>
</head>
<body>
<div id='div1' >offset 控件相对于父窗体的位置</div>
<script>
function offset(ids){
ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>";
ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>";
ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>";
ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>";
ids.innerHTML+="event.offset 鼠标相对于控件的位置<BR>";
ids.innerHTML+="offsetX ="+event.offsetX+"<BR>";
ids.innerHTML+="offsetY ="+event.offsetY+"<BR>";
}
function screen(ids){
ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>";
ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>";
ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>";
ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>";
}
function client(ids){
ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>";
ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>";
ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>";
ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>";
}
function eventc(ids){
ids.innerHTML="鼠标相对于屏幕坐标<BR>event.screenX="+event.screenX+"<BR>";
ids.innerHTML+="event.screenY ="+event.screenY+"<BR>";
ids.innerHTML+="鼠标相对于网页坐标event.clientX="+event.clientX+"<BR>";
ids.innerHTML+="event.clientY ="+event.clientY+"<BR>";
}
</script>
</body>
</html>
Setiap penyemak imbas mempunyai atribut ini dan beberapa nilai mungkin berbeza.
Tulis kod sendiri, bandingkan hasilnya, dan anda akan faham.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
