1. Dapatkan gaya inline elemen
Salinan kode adalah sebagai berikut:
var obj = document.geteLementById ("test");
waspada (obj.height + "/n" + obj.width);
// 200px 200px typeof = String Just Menampilkan nilai dalam atribut gaya
2. Dapatkan gaya yang dihitung
Salinan kode adalah sebagai berikut:
var obj = document.geteLementById ("test");
var style = null;
if (window.getComputedstyle) {
style = window.getComputedStyle (obj, null); // non -e
} kalau tidak {
style = obj.currentstyle; // yaitu
}
alert ("width =" + style.width + "/nheight =" + style.height);
Catatan: Jika lebar dan tinggi elemen tidak diatur, lebar dan tinggi default akan dikembalikan di browser non-IE. Mengembalikan string otomatis di bawah IE
3. Dapatkan gaya yang ditulis oleh <link> dan <tyle> tag
Salinan kode adalah sebagai berikut:
var obj = document.stylesheets [0]; // [Object StylesheetList] Jumlah Lembar Gaya <Link> var aturan = null; // [objek cssrule]
if (obj.cssrules) {
aturan = obj.cssrules [0]; // non -e [objek cssrulelist]
} kalau tidak {
aturan = obj.rules [0]; // yaitu [objek cssrulelist]
}
peringatan (aturan.style.width);
Cssrules (atau aturan) hanya bisa mendapatkan lebar dan tinggi gaya inline dan tautan, dan tidak bisa mendapatkan gaya inline dan yang diperhitungkan.
Ringkasan: Tiga metode di atas untuk mendapatkan ukuran elemen hanya dapat memperoleh ukuran CSS dari elemen, tetapi tidak dapat memperoleh ukuran aktual elemen itu sendiri. Misalnya, tambahkan margin dalam, bilah gulir, perbatasan, dll.
4. Dapatkan ukuran elemen yang sebenarnya
1. ClientWidth dan ClientHeight
Set atribut ini dapat memperoleh ukuran area visual elemen, dan ukuran ruang yang ditempati oleh konten elemen dan margin dalam. Mengembalikan ukuran elemen, tetapi tidak ada unit, unit default adalah px. Jika Anda mengatur unit dengan paksa, seperti 100em, itu masih akan mengembalikan ukuran PX. (Jika Anda mendapatkan CSS, Anda akan mendapatkannya sesuai dengan gaya yang Anda tetapkan). Untuk ukuran aktual suatu elemen, ClientWidth dan ClientHeight dipahami sebagai berikut:
A. Tambahkan perbatasan tanpa perubahan;
B. Meningkatkan margin tanpa perubahan;
C. Tingkatkan bilah gulir, nilai akhir sama dengan ukuran asli dikurangi ukuran bilah gulir;
D. Tingkatkan margin batin, nilai akhir sama dengan ukuran asli ditambah margin dalam;
Salinan kode adalah sebagai berikut:
<Div id = "test"> </div>
#tes{
Latar Belakang: Hijau;
Lebar: 200px;
Tinggi: 200px;
Perbatasan: Solid 5px Red; / * sesuai dengan pemahaman, hasil: 200.200 */
margin: 10px; /* Sesuai dengan pemahaman B, hasil: 200.200*/
padding: 20px; /* Sesuai dengan pemahaman C, hasil: 240.240*/
meluap: gulir; / * Sesuai dengan pemahaman D, hasil: 223.223.223 = 200 (ukuran CSS) + 40 (margin perbatasan di kedua sisi) - 17 (lebar batang gulir) */
}
window.onload = function () {
var obj = document.geteLementById ("test");
waspada (obj.clientwidth + "," + obj.clientheight);
};
Catatan: Jika lebar dan tinggi CSS tidak diatur, browser non-IE akan menghitung ukuran yang dihitung dari bilah gulir dan margin, sedangkan browser IE akan mengembalikan 0 (IE8 telah diperbaiki).
2. Gulir dan scrollheight
Set properti ini bisa mendapatkan ukuran elemen dari konten pengguliran (konten yang terlihat). Mengembalikan ukuran elemen, unit default adalah px. Jika tidak ada lebar dan tinggi CSS yang ditetapkan, itu akan mendapatkan lebar dan tinggi yang dihitung. Untuk ukuran elemen yang sebenarnya, scrollwidth dan scrollheight dipahami sebagai berikut:
1. Tambahkan perbatasan, browser yang berbeda memiliki penjelasan yang berbeda (berikut ini normal di IE8, tetapi IE6 tidak berfungsi dengan baik):
A) Browser Firefox dan Opera akan meningkatkan ukuran perbatasan, 220x220
b) IE, browser chrome dan safari mengabaikan ukuran perbatasan, 200x200
c) IE browser hanya menampilkan ketinggian konten aslinya, 200x18 (IE8 telah memodifikasi masalah ini)
2. Tambahkan margin dalam, nilai akhir akan sama dengan ukuran asli ditambah ukuran margin dalam, 220x220, dan IE adalah 220x38
3. Tambahkan bilah gulir, nilai akhir akan sama dengan ukuran asli dikurangi ukuran batang gulir, 184x184, yaitu 184x18
4. Tambahkan data eksternal, tidak ada perubahan.
5. Tingkatkan konten overflow, firefox, chrome dan yaitu mendapatkan tinggi konten yang sebenarnya, opera lebih kecil dari ketinggian yang diperoleh oleh tiga browser pertama, dan safari lebih besar dari ketinggian yang diperoleh oleh tiga browser pertama.
3. OffsetWidth dan OffsetHeight
Set properti ini dapat mengembalikan ukuran elemen yang sebenarnya, termasuk perbatasan, margin dalam, dan scrollbars. Mengembalikan ukuran elemen, unit default adalah px. Jika tidak ada lebar dan tinggi CSS yang ditetapkan, itu akan mendapatkan lebar dan tinggi yang dihitung. Untuk ukuran elemen yang sebenarnya, offsetwidth dan offsetheight dipahami sebagai berikut:
1. Tambahkan perbatasan, nilai akhir akan sama dengan ukuran asli ditambah ukuran perbatasan, yaitu 220;
2. Tambahkan margin dalam, nilai akhir akan sama dengan ukuran asli ditambah ukuran margin dalam, yaitu 220;
3. Tambahkan data eksternal, tidak ada perubahan;
4. Tambahkan bilah gulir, tidak ada perubahan, dan tidak akan berkurang;
Untuk mendapatkan ukuran elemen, umumnya elemen tingkat blok dan lebih nyaman untuk mengatur elemen ukuran CSS. Sangat merepotkan jika itu adalah elemen inline atau elemen yang tidak memiliki set ukuran, sehingga disarankan untuk memperhatikan saat menggunakannya.
Salinan kode adalah sebagai berikut:
<Div id = "test"> Test Div Element </Div>
#tes{
Latar Belakang: Hijau;
Lebar: 200px;
Tinggi: 200px;
Perbatasan: solid 10px merah; /*Hasil: 220.220*/
margin: 10px; /*Hasil: 220.220 (tidak ada perubahan)*/
padding: 10px; /*Hasil: 240.240*/
meluap: gulir; /*Hasil: 240.240 (tidak ada perubahan)*/
}
window.onload = function () {
var obj = document.geteLementById ("test");
waspada (obj.offsetWidth + "," + obj.offsetheight);
};
5. Dapatkan ukuran elemen di sekitarnya
1. ClientLeft dan ClientTop mendapatkan ukuran perbatasan
Set atribut ini bisa mendapatkan ukuran elemen yang mengatur perbatasan kiri dan perbatasan atas. Saat ini, hanya grup kiri dan atas yang tersedia, dan kanan dan bawah tidak tersedia. Jika lebar keempat sisi berbeda, Anda dapat secara langsung mendapatkannya melalui gaya yang dihitung, atau menggunakan tiga kelompok di atas untuk mendapatkan ukuran elemen untuk mendapatkan pengurangan.
Lebar Perbatasan Kanan: Obj.Offsetwidth-Obj.Clientwidth-Obj.ClientLeft
Lebar perbatasan bawah: obj.offsetheight-obj.clientheight-obj.clienttop
Salinan kode adalah sebagai berikut:
<Div id = "test"> Test Div Element </Div>
#tes{
Latar Belakang: Hijau;
Lebar: 200px;
Tinggi: 200px;
Border-top: solid 10px merah; S
Border-Right: Solid 20px #00FF00;
Border-Bottom: solid 30px biru;
Border-left: solid 40px #808080;
}
window.onload = function () {
var obj = document.geteLementById ("test");
waspada (obj.clientleft + "," + obj.clienttop); // 40,10
};
2. Offsetleft dan offsettop
Set atribut ini bisa mendapatkan posisi elemen saat ini relatif terhadap elemen induk. Untuk mendapatkan posisi elemen saat ini relatif terhadap elemen induk, yang terbaik adalah mengaturnya ke posisi posisi: absolute; jika tidak, browser yang berbeda akan memiliki penjelasan yang berbeda.
A. Tetapkan posisi ke absolute, semua browser mengembalikan nilai yang sama. menyukai:
Salinan kode adalah sebagai berikut:
<Div id = "test"> Test Div Element </Div>
#tes{
Latar Belakang: Hijau;
Lebar: 200px;
Tinggi: 200px;
Posisi: Absolute;
Kiri: 30px;
Atas: 20px;
}
window.onload = function () {
var obj = document.geteLementById ("test");
peringatan (obj.offsetleft + "," + obj.offsettop); // 30, 20
};
B. Menambahkan batas perbatasan dan dalam tidak akan mempengaruhi posisinya, tetapi menambahkan data luar akan menumpuk.
3. box.offsetparent mendapatkan elemen induk
Dalam offsetparent, jika elemen induk itu sendiri adalah <body>, non -e mengembalikan objek tubuh, dan yaitu (IE6) mengembalikan objek HTML. Jika dua elemen bersarang, jika posisi penentuan posisi: absolute tidak digunakan pada elemen induk, maka offsetparent akan mengembalikan objek tubuh atau objek HTML. Oleh karena itu, ketika mendapatkan offsetleft dan offsettop, penentuan posisi CSS sangat penting.
Jika, dalam banyak tingkatan, lapisan luar telah diposisikan, bagaimana kita bisa mendapatkan jarak antara elemen di lapisan dalam dari elemen tubuh atau html? Artinya, dapatkan lokasi elemen apa pun dari halaman. Kemudian kita dapat menulis fungsi dan mencapainya dengan terus -menerus mundur ke atas untuk mendapatkan akumulasi.
Salinan kode adalah sebagai berikut:
box.offsettop + box.offsetparent.offsettop; // Saat hanya ada dua lapisan
fungsi offsetleft (elemen) {
var left = element.offsetleft; // Dapatkan jarak lapisan pertama
var parent = element.offsetParent; // Dapatkan elemen induk pertama
while (Parent! == null) {// Jika ada elemen induk sebelumnya
Kiri += Parent.Offsetleft; // Tambahkan jarak lapisan ini
Parent = Parent.OffsetParent; // Dapatkan elemen induk dari lapisan ini
} // Lalu lanjutkan loop
kembali ke kiri;
}
4. Gulir dan Gulir
Set properti ini dapat memperoleh ukuran area bilah gulir yang disembunyikan (area di atas bilah gulir), atau diatur untuk memposisikannya ke area itu. Jika Anda ingin menggulir scrollbar ke posisi awalnya, Anda dapat menulis fungsi:
Salinan kode adalah sebagai berikut:
fungsi scrollstart (elemen) {
if (element.scrolltop! = 0) {
element.scrolltop = 0;
}
}
5. getBoundingClientRect ()
Metode ini mengembalikan objek persegi panjang dengan empat properti: kiri, atas, kanan, dan bawah. Ini menunjukkan jarak antara setiap tepi elemen dan sisi atas dan kiri halaman.
Salinan kode adalah sebagai berikut:
var box = document.geteLementById ('box'); // Dapatkan elemen
alert (box.getBoundingClientRect (). Top); // Jarak di atas elemen berasal dari bagian atas halaman
alert (box.getBoundingClientRect (). kanan); // Jarak ke kanan elemen dari kiri halaman
alert (box.getBoundingClientRect (). Bottom); // Jarak di bawah elemen berasal dari atas halaman
alert (box.getBoundingClientRect (). Kiri); // Jarak ke kiri elemen dari kiri halaman
CATATAN: IE, Firefox3+, Opera9.5, Chrome, dan Safari Dukungan. Dalam IE, koordinat default dihitung dari (2, 2), menghasilkan jarak akhir dari dua piksel lebih dari browser lainnya. Kita harus kompatibel.
Salinan kode adalah sebagai berikut:
document.documentelement.clienttop; // non -e adalah 0, yaitu 2
document.documentelement.clientleft; // non -e adalah 0, yaitu 2
functionGgetRect (elemen) {
var rect = element.getBoundingClientRect ();
var top = document.documentelement.clienttop;
var left = document.documentelement.clientleft;
kembali{
Atas: Rect.Top - Top,
Bawah: Rect.Bottom - Top,
Kiri: Rect. Left - kiri,
Kanan: Rect.Right - kiri
}
}
Tambahkan tepi eksternal, margin dalam, perbatasan, dan bilah gulir masing -masing untuk menguji apakah semua browser konsisten.
Di atas adalah semua konten yang dijelaskan dalam artikel ini. Saya harap Anda bisa menyukainya.