Mengatur Gaya Komputasi HTML Menggunakan getComputedStyle DOM
Properti getComputedStyle() window DOM pada HTML merupakan properti yang digunakan untuk mendapatkan semua nilai komputasi CSS dan nilai value dari elemen spesifik. Kegunaan dari style komputasi adalah untuk menampilkan elemen setelah style digunakan dari berbagai sumber yang telah diterapkan. Properti getComputedStyle() merupakan properti yang mengembalikan nilai object CSSStyleDeclaration.
Sebelum memahami lebih dalam materi tentang Mengatur Gaya Komputasi HTML Menggunakan getComputedStyle DOM, terlebih dahulu pelajari materi tentang: Membuat Tombol Oke dan Cancel HTML Menggunakan Confirm Window DOM [klik], Mengatur Waktu HTML clearTimeout dan clearInterval Window DOM [klik], dan Melakukan Encoding HTML Menggunakan Btoa Window DOM [klik].
Sintak:
window.getComputedStyle(element, pseudoElement)
Properti Parameter:
Contoh: mengembalikan nilai font-family dari teks pada elemen div.
 |
| Properti getComputedStyle DOM |
Sintak:
window.getComputedStyle(element, pseudoElement)
Properti Parameter:
- element: berfungsi untuk mendapatkan nilai style komputasi.
- pseudoElement: merupakan parameter opsional yang digunakan untuk mendapatkan nilai elemen-peseudo.
Baca Juga:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Window
getComputedStyle() DOM pada
HTML
</title>
<style>
div
{
color: white;
text-align: justify;
}
</style>
</head>
<body>
<center>
<p>
<button
onclick="myFunction()">
Try it
</button>
</p>
<div
id="test"
style="height: 100px;
background-color: green;
font-size: 50px;
padding-left: 140px;
padding-top: 50px;">
Blog Elfan
</div>
<p>
Komputasi font-family dari
teks pada elemen div adalah:
<span id="demo"></span>
</p>
<script>
function myFunction()
{
var elem = document.getElementById("test");
var theCSSprop =
window.getComputedStyle(
elem, null).getPropertyValue("font-family");
document.getElementById("demo").innerHTML =
theCSSprop;
}
</script>
</center>
</body>
</html>
Referensi Tambahan:
- Perintah Prompt HTML Menggunakan Prompt Window DOM [klik]
- Mengatur Ukuran Halaman HTML Menggunakan resizeBy Window DOM [klik]
- Mengatur Ukuran Halaman HTML Menggunakan resizeTo Window DOM [klik]
- Melakukan Gulir HTML Menggunakan scrollTo Window DOM [klik]
- Mengatur Waktu HTML Menggunakan setTimeout dan setInterval Window DOM [klik]
- Menghentikan Layar HTML Menggunakan Stop Window DOM [klik]
- Membuat Kunci Penyimpanan HTML Menggunakan Storage Key DOM [klik]
Artikel ini didedikasikan kepada: Mutiara Dwi Rahayuni, Muyasyaroh, Nadia Ayu Nuraini, Nandya Febrilia Hilmasari, dan Nanik Sri Puji Rahmawati.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti getcomputedstyle DOM pada HTML?
BalasHapusBerikut ini diperlihatkan beberapa contoh browser untuk mengaktifkan properti getcomputetStyle DOM pada HTML:
Hapus11. Google Chrome 11.0
22. Internet Explorer 9.0
33. Firefox 4.0
44. Opera 11.5
55. Safari 5
Apa yang dimaksud dengan method getComputedStyle() DOM pada HTML?
BalasHapusMethod getComputedStyle() DOM pada HTML merupakan method properti yang digunakan untuk mengembalikan nilai object yang berisi nilai dari semua properti CSS dari suatu elemen, setelah menerapkan stylesheet aktif dan menyelesaikan perhitungan dasar apapun yang mungkin ada pada nilai tersebut.
HapusMethod getComputedStyle() DOM pada HTML merupakan properti yang mendapatkan nilai properti dan nilai CSS yang dihitung dari nilai elemen HTML.
HapusMethod getComputedStyle() adalah properti yang digunakan untuk mengembalikan nilai object CSSStyleDeclaration.
Hapus