Posting ini menjelaskan tujuan, cara kerja, dan penggunaan metode 'getComputedStyle()' dari objek jendela di JavaScript.
Apa yang Dilakukan Metode “getComputedStyle()” pada Objek Jendela di JavaScript?
“ getComputedStyle() ” mengembalikan objek 'CSSStyleDeclaration' yang berisi kumpulan properti CSS dan nilainya. Itu menghitung properti penataan elemen HTML yang ditargetkan. Selain itu, ini juga memainkan peran penting dalam menghitung properti gaya dari bagian spesifik elemen HTML.
Sintaksis
jendela. getComputedStyle ( elemen , pseudoElement )
Dalam sintaks di atas:
- jendela: Ini adalah objek global yang mewakili jendela browser.
- elemen: Ini menentukan elemen HTML tertentu yang gayanya perlu dihitung.
- elemen semu: Ini mengacu pada bagian dari elemen HTML yang diberikan misalnya, huruf pertama, huruf terakhir, dll.
Bagian berikut menampilkan ilustrasi praktis dari metode “getComputedStyle()” dengan bantuan contoh.
Kode HTML (Termasuk Gaya CSS)
Pertama, lihat ikhtisar kode HTML berikut:
< kepala >
< gaya >
h3{
ukuran font: 20px;
background-color:hijaukuning
}
< / gaya >
< / kepala >
< tubuh >
< h2 > Gunakan getComputedStyle() Metode Objek Jendela < / h2 >
< h3 pengenal = 'demo' > Ukuran font elemen HTML yang diberikan adalah: < / h3 >
< P pengenal = 'Sampel' >< / P >
Pada baris kode di atas:
- “
” tag menerapkan penataan gaya “ ” Elemen HTML. - Dalam '
”, subjudul disertakan di bagian “ ” - Selanjutnya, elemen “
” yang memiliki id “ demo ” menentukan subjudul kedua.
- Terakhir, “ ” tag mengacu pada paragraf kosong dengan id “ Sampel ” untuk menampilkan properti CSS yang dihitung dari elemen yang ditargetkan.
Catatan: Kode HTML ini diikuti di seluruh contoh yang disebutkan di pos ini.
Contoh 1: Menerapkan Metode “getComputedStyle()” untuk Menghitung Ukuran Font Elemen HTML
Contoh ini menerapkan metode “getComputedStyle()” untuk mendapatkan ukuran font elemen HTML target.
Kode JavaScript
Pertimbangkan kode JavaScript yang dinyatakan:
< naskah >const elemen = dokumen. getElementById ( 'demo' ) ;
const obj = jendela. getComputedStyle ( elemen )
biar ukuran = obj. getPropertyValue ( 'ukuran huruf' ) ;
dokumen. getElementById ( 'Sampel' ) . innerHTML = ukuran ;
naskah >
Dalam cuplikan kode di atas:
- Deklarasikan variabel “ elemen ” dengan kata kunci “const” yang menggunakan “ getElementById() ” metode untuk mengakses elemen “
” melalui id-nya “ demo ”.
- Setelah itu, terapkan ' getComputedStyle() ” untuk menghitung properti CSS dari elemen “
” yang diambil.
- Selanjutnya, “ ukuran ” variabel menerapkan “ getPropertyValue() ” metode yang mengembalikan nilai properti CSS yang diterapkan “ ukuran huruf ” sebagai string.
- Terakhir, metode “getElementById()” mengakses paragraf kosong dan menampilkan nilai properti CSS yang dihitung menggunakan “ innerHTML ' Properti.
Keluaran
Seperti yang terlihat, output menampilkan nilai ukuran font yang diterapkan terhadap elemen HTML yang sesuai yaitu, “
”.
Contoh 2: Menerapkan Metode “getComputedStyle()” untuk Menghitung Warna Latar Belakang Elemen HTML
Dalam contoh ini, metode yang dibahas digunakan untuk menghitung warna latar belakang elemen HTML tertentu:
< naskah >const elemen = dokumen. getElementById ( 'demo' ) ;
const obj = jendela. getComputedStyle ( elemen )
biarkan bgcolor = obj. getPropertyValue ( 'warna latar belakang' ) ;
dokumen. getElementById ( 'Sampel' ) . innerHTML = bgcolor ;
naskah >
Di blok kode di atas, ' getComputedStyle() metode menghitung ' warna latar belakang ” dari elemen “
” yang id-nya adalah “demo” dan mengembalikan nilainya sebagai “rgb” melalui “ getPropertyValue() ' metode.
Keluaran
Outputnya dengan jelas menunjukkan warna latar belakang yang dihitung dari elemen HTML yang diambil.
Kesimpulan
JavaScript menawarkan “ getComputedStyle() ” metode untuk menghitung properti gaya CSS dari elemen HTML target. Nilai yang dihitung dari metode ini adalah string yang berisi properti CSS dan nilainya. Itu dapat diimplementasikan dengan berbagai cara menggunakan JavaScript untuk mendapatkan properti CSS dari elemen HTML apa pun. Posting ini memberikan tampilan mendetail tentang tujuan, cara kerja, dan penggunaan metode 'getComputedStyle()' dari objek jendela di JavaScript.