Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Gaya Komputasi HTML Menggunakan getComputedStyle DOM

Dipublikasikan Oleh: elfanmauludi 6 komentar
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.

Penggunaan Properti getComputedStyle() DOM pada HTML
Properti getComputedStyle DOM

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:
  • element: berfungsi untuk mendapatkan nilai style komputasi.
  • pseudoElement: merupakan parameter opsional yang digunakan untuk mendapatkan nilai elemen-peseudo.

Baca Juga:

Contoh: mengembalikan nilai font-family dari teks pada elemen div.

<!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>


Artikel ini didedikasikan kepada: Mutiara Dwi Rahayuni, Muyasyaroh, Nadia Ayu Nuraini, Nandya Febrilia Hilmasari, dan Nanik Sri Puji Rahmawati.
Location: Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Mengatur Gaya Komputasi HTML Menggunakan getComputedStyle DOM"

  1. AnonimRabu, 28 September 2022 pukul 07.24.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti getcomputedstyle DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 28 September 2022 pukul 07.25.00 WIB

      Berikut ini diperlihatkan beberapa contoh browser untuk mengaktifkan properti getcomputetStyle DOM pada HTML:
      11. Google Chrome 11.0
      22. Internet Explorer 9.0
      33. Firefox 4.0
      44. Opera 11.5
      55. Safari 5

      Hapus
  2. AnonimRabu, 28 September 2022 pukul 15.13.00 WIB

    Apa yang dimaksud dengan method getComputedStyle() DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 28 September 2022 pukul 15.13.00 WIB

      Method 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.

      Hapus
    2. AnonimRabu, 28 September 2022 pukul 15.13.00 WIB

      Method getComputedStyle() DOM pada HTML merupakan properti yang mendapatkan nilai properti dan nilai CSS yang dihitung dari nilai elemen HTML.

      Hapus
    3. AnonimRabu, 28 September 2022 pukul 15.13.00 WIB

      Method getComputedStyle() adalah properti yang digunakan untuk mengembalikan nilai object CSSStyleDeclaration.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -