Catatan ini menerangkan objektif, kerja dan penggunaan kaedah 'getComputedStyle()' objek tetingkap dalam JavaScript.
Apakah Kaedah 'getComputedStyle()' Objek Tetingkap Lakukan dalam JavaScript?
' getComputedStyle() ” kaedah mengembalikan objek “CSSStyleDeclaration” yang mengandungi koleksi sifat CSS dan nilainya. Ia mengira sifat penggayaan elemen HTML yang disasarkan. Selain itu, ia juga memainkan peranan penting dalam mengira sifat penggayaan bahagian tertentu elemen HTML.
Sintaks
tingkap. getComputedStyle ( unsur , pseudoElement )
Dalam sintaks di atas:
- tingkap: Ia adalah objek global yang mewakili tetingkap penyemak imbas.
- unsur: Ia menentukan elemen HTML tertentu yang gayanya perlu dikira.
- pseudoElement: Ia merujuk kepada bahagian elemen HTML yang diberikan cth., huruf pertama, huruf terakhir, dsb.
Bahagian berikut menjalankan ilustrasi praktikal kaedah 'getComputedStyle()' dengan bantuan contoh.
Kod HTML (Termasuk Penggayaan CSS)
Pertama, dapatkan gambaran keseluruhan kod HTML berikut:
< kepala >
< gaya >
h3{
saiz fon: 20px;
warna latar belakang: hijau kuning
}
< / gaya >
< / kepala >
< badan >
< h2 > Gunakan Kaedah getComputedStyle() Objek Tetingkap < / h2 >
< h3 ID = 'demo' > Saiz fon bagi elemen HTML yang diberikan ialah: < / h3 >
< hlm ID = 'sampel' >< / hlm >
Dalam baris kod di atas:
- '
teg ” menggunakan penggayaan yang dinyatakan bagi “ ” Elemen HTML. - Di dalam '
bahagian ”, subtajuk disertakan dalam “ ” - Seterusnya, elemen “
” mempunyai id “ demo ” menentukan subtajuk kedua.
- Akhir sekali, ' 'tag merujuk kepada perenggan kosong dengan id ' sampel ” untuk memaparkan sifat CSS yang dikira bagi elemen yang disasarkan.
Catatan: Kod HTML ini diikuti sepanjang semua contoh yang dinyatakan dalam siaran ini.
Contoh 1: Menggunakan Kaedah 'getComputedStyle()' untuk Mengira Saiz Fon Elemen HTML
Contoh ini menggunakan kaedah 'getComputedStyle()' untuk mendapatkan saiz fon elemen HTML sasaran.
Kod JavaScript
Pertimbangkan kod JavaScript yang dinyatakan:
< skrip >const unsur = dokumen. getElementById ( 'demo' ) ;
const obj = tingkap. getComputedStyle ( unsur )
biarkan saiz = obj. getPropertyValue ( 'Saiz huruf' ) ;
dokumen. getElementById ( 'sampel' ) . innerHTML = saiz ;
skrip >
Dalam coretan kod di atas:
- Istiharkan pembolehubah “ unsur ” dengan kata kunci “const” yang menggunakan “ getElementById() ' kaedah untuk mengakses elemen '
' melalui idnya ' demo ”.
- Selepas itu, gunakan ' getComputedStyle() ” kaedah untuk mengira sifat CSS unsur “
” yang diambil.
- Seterusnya, ' saiz ' pembolehubah menggunakan ' getPropertyValue() ' kaedah yang mengembalikan nilai sifat CSS yang digunakan ' Saiz huruf ” sebagai tali.
- Akhir sekali, kaedah 'getElementById()' mengakses perenggan kosong dan memaparkan nilai sifat CSS yang dikira menggunakan ' innerHTML ” harta benda.
Pengeluaran
Seperti yang dilihat, output memaparkan nilai saiz fon yang digunakan terhadap elemen HTML yang sepadan iaitu, '
'.
Contoh 2: Menggunakan Kaedah 'getComputedStyle()' untuk Mengira Warna Latar Belakang Elemen HTML
Dalam contoh ini, kaedah yang dibincangkan digunakan untuk mengira warna latar belakang elemen HTML tertentu:
< skrip >const unsur = dokumen. getElementById ( 'demo' ) ;
const obj = tingkap. getComputedStyle ( unsur )
biar bgcolor = obj. getPropertyValue ( 'warna latar belakang' ) ;
dokumen. getElementById ( 'sampel' ) . innerHTML = bgcolor ;
skrip >
Dalam blok kod di atas, ' getComputedStyle() ' kaedah mengira ' warna latar belakang ” daripada elemen “
” yang idnya ialah “demo” dan mengembalikan nilainya sebagai “rgb” melalui “ getPropertyValue() ” kaedah.
Pengeluaran
Output dengan jelas menunjukkan warna latar belakang yang dikira bagi elemen HTML yang diambil.
Kesimpulan
JavaScript menawarkan ' getComputedStyle() ” kaedah untuk mengira sifat penggayaan CSS elemen HTML sasaran. Nilai pengiraan kaedah ini ialah rentetan yang mengandungi sifat CSS dan nilainya. Ia boleh dilaksanakan dengan cara yang berbeza menggunakan JavaScript untuk mendapatkan sifat CSS bagi mana-mana elemen HTML. Catatan ini memberikan pandangan terperinci tentang objektif, kerja dan penggunaan kaedah 'getComputedStyle()' objek tetingkap dalam JavaScript.