JavaScript memperoleh saiz elemen dan kemahiran operasi summary_javascript

1 Dapatkan gaya sebaris elemen

Salin kod Kod adalah seperti berikut:

var obj = document.getElementById("test");
makluman(obj.tinggi "n" obj.lebar);
// 200px 200px typeof=string hanya memaparkan nilai dalam atribut gaya

2. Dapatkan gaya yang dikira

Salin kod Kod adalah seperti berikut:

var obj = document.getElementById("test");
gaya var = null;
jika (window.getComputedStyle) {
Style = window.getComputedStyle(obj, null); // Bukan IE
} lain {
Gaya = obj.currentStyle; // IE
}
alert("width=" style.width "nheight=" style.height);

Nota: Jika lebar dan tinggi elemen tidak ditetapkan, lebar dan tinggi lalai akan dikembalikan dalam penyemak imbas bukan IE. Kembalikan rentetan auto

di bawah IE

3 Dapatkan gaya yang ditulis dalam teg

Salin kod Kod adalah seperti berikut:

var obj = document.styleSheets[0]; // [object StyleSheetList] Bilangan helaian gayavar rule = null;// [objek CSSRule]

jika (obj.cssRules){
Peraturan = obj.cssRules[0]; // Bukan IE [objek CSSRuleList]
} lain {
Peraturan = obj.rules[0]; // IE [objek CSSRuleList]
}
alert(rule.style.width);

cssRules (atau peraturan) hanya boleh mendapatkan lebar dan ketinggian gaya sebaris dan pautan, tetapi tidak boleh mendapatkan gaya sebaris dan dikira.

Ringkasan: Tiga kaedah CSS di atas untuk mendapatkan saiz elemen hanya boleh mendapatkan saiz CSS elemen, tetapi tidak boleh mendapatkan saiz sebenar elemen itu sendiri. Contohnya, menambah pelapik, bar skrol, sempadan, dsb.

4. Dapatkan saiz sebenar elemen

1. clientWidth dan clientHeight

Set atribut ini boleh mendapatkan saiz kawasan kelihatan elemen dan ruang yang diduduki oleh kandungan dan pelapik elemen. Saiz elemen dikembalikan, tetapi tiada unit Unit lalai ialah px Jika anda menetapkan unit secara paksa, seperti 100em, ia masih akan mengembalikan saiz px. (Jika CSS diperoleh, ia akan diperolehi mengikut gaya yang anda tetapkan). Untuk saiz sebenar elemen, clientWidth dan clientHeight difahami seperti berikut:

a. Tambah jidar, tiada perubahan
b. Tambahkan jidar, tiada perubahan
c. Naikkan bar skrol, dan nilai akhir adalah sama dengan saiz asal tolak saiz bar skrol; d. Tingkatkan padding, nilai akhir adalah sama dengan saiz asal ditambah dengan saiz padding

Salin kod Kod adalah seperti berikut:

#ujian{

warna latar belakang: hijau;
Lebar: 200px;
ketinggian: 200px;
Sempadan: pepejal 5px merah; /* Sepadan dengan pemahaman, hasil: 200,200 */
Margin: 10px; /* Sepadan dengan b pemahaman, hasil: 200,200*/
Padding: 20px; /* Sepadan dengan pemahaman c, hasil: 240,240*/
Limpahan: tatal; /* Sepadan dengan pemahaman d, hasilnya ialah: 223, 223, 223=200 (saiz css) 40 (padding pada kedua-dua belah) - 17 (lebar bar tatal) */
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.clientWidth "," obj.clientHeight);
};

Nota: Jika tiada lebar dan ketinggian CSS ditetapkan, penyemak imbas bukan IE akan menyertakan saiz pengiraan bar skrol dan padding, manakala penyemak imbas IE akan mengembalikan 0 (ditetapkan dalam IE8).

2. scrollWidth dan scrollHeight
Set sifat ini boleh mendapatkan saiz elemen kandungan menatal (kandungan kelihatan). Mengembalikan saiz elemen, unit lalai ialah px. Jika anda tidak menetapkan sebarang lebar dan tinggi CSS, ia akan mendapat lebar dan ketinggian yang dikira. Untuk saiz sebenar elemen, scrollWidth dan scrollHeight difahami seperti berikut:
1. Tambahkan sempadan, penyemak imbas berbeza mempunyai tafsiran berbeza (yang berikut berfungsi biasanya dalam IE8, tetapi tidak dalam IE6):
a) Pelayar Firefox dan Opera akan meningkatkan saiz sempadan, 220x220
b) IE, pelayar Chrome dan Safari akan mengabaikan saiz sempadan, 200x200
c) Pelayar IE hanya memaparkan ketinggian kandungan asalnya, 200x18 (IE8 telah membetulkan masalah ini)
2. Tambah padding, nilai akhir akan sama dengan saiz asal ditambah saiz padding, 220x220, IE ialah 220x38
3. Tambahkan bar skrol, nilai akhir akan sama dengan saiz asal tolak saiz bar skrol, 184x184, IE ialah 184x18
4. Menambah kubu kuat sempadan luar, tiada perubahan.
5. Tingkatkan limpahan kandungan Firefox, Chrome dan IE memperoleh ketinggian kandungan sebenar Opera memperoleh ketinggian yang lebih kecil daripada tiga pelayar pertama, dan Safari memperoleh ketinggian yang lebih besar daripada tiga penyemak imbas pertama.

3. offsetWidth dan offsetHeight
Set sifat ini boleh mengembalikan saiz sebenar elemen, termasuk sempadan, padding dan bar skrol. Mengembalikan saiz elemen, unit lalai ialah px. Jika anda tidak menetapkan sebarang lebar dan tinggi CSS, ia akan mendapat lebar dan ketinggian yang dikira. Untuk saiz sebenar elemen, offsetWidth dan offsetHeight difahami seperti berikut:
1. Tambahkan sempadan, nilai akhir akan sama dengan saiz asal ditambah saiz sempadan, iaitu 220; 2. Tingkatkan padding, nilai akhir akan sama dengan saiz asal ditambah saiz padding, iaitu 220; 3. Menambah kubu kuat sempadan luar, tiada perubahan
4. Tambah bar skrol, tiada perubahan, tiada penurunan; Untuk mendapatkan saiz elemen, biasanya lebih mudah untuk menggunakan elemen dan elemen peringkat blok dengan saiz CSS yang ditetapkan. Ia amat menyusahkan jika ia adalah elemen sebaris (sebaris) atau elemen tanpa saiz yang ditetapkan, jadi adalah disyorkan untuk memberi perhatian apabila menggunakannya.

Salin kod Kod adalah seperti berikut:

test div element

#ujian{

warna latar belakang: hijau;
Lebar: 200px;
ketinggian: 200px;
Sempadan: pepejal 10px merah; /*Keputusan: 220,220*/
Margin: 10px; /*Keputusan: 220,220 (tiada perubahan)*/
Padding: 10px; /*Hasil: 240,240*/
Limpahan: tatal; /*Keputusan: 240,240 (tiada perubahan)*/
}
window.onload = function(){
var obj = document.getElementById("test");
​​ alert(obj.offsetWidth "," obj.offsetHeight);
};

5 Dapatkan saiz sekeliling elemen

1. clientLeft dan clientTop dapatkan saiz sempadan Set atribut ini boleh mendapatkan saiz sempadan kiri dan sempadan atas yang ditetapkan oleh elemen. Pada masa ini, hanya kumpulan Kiri dan Atas disediakan, dan Kanan dan Bawah tidak disediakan. Jika lebar empat sisi berbeza, ia boleh diperoleh secara langsung melalui gaya yang dikira, atau dengan penolakan tiga kumpulan di atas untuk mendapatkan saiz elemen.
Lebar sempadan kanan: obj.offsetWidth-obj.clientWidth-obj.clientLeft Lebar sempadan bawah: obj.offsetHeight-obj.clientHeight-obj.clientTop

Salin kod Kod adalah seperti berikut:

test div element

#ujian{

warna latar belakang: hijau;
Lebar: 200px;
ketinggian: 200px;
Atas sempadan: pepejal 10px merah;s
Sempadan-kanan: pepejal 20px #00ff00;
Sempadan-bawah: pepejal 30px biru;
Sempadan-kiri: pepejal 40px #808080; }
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.clientLeft "," obj.clientTop); // 40,10
};

2. offsetLeft dan offsetTop
Set atribut ini boleh mendapatkan kedudukan elemen semasa berbanding dengan elemen induk. Untuk mendapatkan kedudukan semasa sesuatu elemen berbanding dengan elemen induknya, sebaiknya tetapkan ia kepada position:absolute jika tidak pelayar yang berbeza akan mempunyai tafsiran yang berbeza.
a. Tetapkan kedudukan kepada mutlak, dan semua pelayar akan mengembalikan nilai yang sama. Seperti:

Salin kod Kod adalah seperti berikut:

test div element

#ujian{
warna latar belakang: hijau;
Lebar: 200px;
ketinggian: 200px;
jawatan: mutlak;
Kiri: 30px;
atas: 20px;
}
window.onload = function(){
var obj = document.getElementById("test");
alert(obj.offsetLeft "," obj.offsetTop); // 30, 20
};

b. Menambah sempadan dan padding tidak akan menjejaskan kedudukannya, tetapi menambah padding luar akan menambah.

3. offsetParent mendapat elemen induk
Dalam offsetParent, jika elemen induk ialah , bukan IE akan mengembalikan objek badan dan IE (IE6) akan mengembalikan objek html. Jika dua elemen bersarang, jika elemen induk atas tidak menggunakan position:absolute, maka offsetParent akan mengembalikan objek badan atau objek html. Oleh itu, kedudukan CSS adalah sangat penting apabila mendapatkan offsetLeft dan offsetTop.
Jika, dalam banyak lapisan, lapisan luar telah diposisikan, bagaimanakah kita boleh mendapatkan jarak antara elemen lapisan dalam dan elemen badan atau html? Iaitu, dapatkan kedudukan mana-mana elemen pada halaman. Kemudian kita boleh menulis fungsi untuk mencapai pengumpulan dengan terus menjejak ke atas.

Salin kod Kod adalah seperti berikut:

box.offsetTop box.offsetParent.offsetTop; // Apabila hanya terdapat dua lapisan

fungsi offsetLeft(elemen){
var left = element.offsetLeft; // Dapatkan jarak lapisan pertama
var parent = element.offsetParent; // Dapatkan elemen induk pertama
Manakala (induk !== null) { // Jika terdapat elemen induk sebelumnya
           kiri = parent.offsetLeft; // Kumpul jarak lapisan ini
         induk = parent.offsetParent; // Dapatkan elemen induk lapisan ini
} //Kemudian teruskan gelung
Balik kiri;
}

4. tatal Atas dan tatal Kiri
Set atribut ini boleh memperoleh saiz kawasan tempat bar skrol disembunyikan (kawasan di atas bar skrol), dan juga boleh ditetapkan untuk mencari kawasan ini. Jika anda mahu bar skrol menatal ke kedudukan awal, anda boleh menulis fungsi:

Salin kod Kod adalah seperti berikut:

fungsi tatalStart (elemen) {
Jika ( element.scrollTop != 0 ) {
          elemen.scrollTop = 0;
}
}

5. getBoundingClientRect()
Kaedah ini mengembalikan objek segi empat tepat yang mengandungi empat sifat: kiri, atas, kanan dan bawah. Mewakili jarak antara setiap sisi elemen dan bahagian atas dan kiri halaman masing-masing.

Salin kod Kod adalah seperti berikut:

var box=document.getElementById('box'); // Dapatkan elemen
alert(box.getBoundingClientRect().top); // Jarak antara bahagian atas elemen dan bahagian atas halaman
alert(box.getBoundingClientRect().right); //Jarak antara bahagian kanan elemen dan bahagian kiri halaman
alert(box.getBoundingClientRect().bottom); //Jarak antara bahagian bawah elemen dan bahagian atas halaman
alert(box.getBoundingClientRect().left); //Jarak antara bahagian kiri elemen dan bahagian kiri halaman

Nota: IE, Firefox3, Opera9.5, Chrome dan Safari disokong Dalam IE, koordinat lalai dikira daripada (2,2), menghasilkan jarak akhir menjadi dua piksel lebih daripada penyemak imbas lain untuk membuat serasi.

Salin kod Kod adalah seperti berikut:

document.documentElement.clientTop; //Non-IE ialah 0, IE ialah 2
document.documentElement.clientLeft; //Non-IE ialah 0, IE ialah 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 - atas,
                                                                                                                                                                                                                                                                                                                              kiri Kanan : rect.right - left
}
}

Tambah jidar luar, jidar dalam, jidar dan bar skrol masing-masing untuk menguji sama ada semua penyemak imbas adalah konsisten.

Di atas adalah semua kandungan yang diterangkan dalam artikel ini, saya harap anda semua akan menyukainya.