Cara menerapkan css untuk id dinamis

Question

Menangani elemen web dinamis adalah tantangan utama dalam otomatisasi pengujian. Selenium 3 menawarkan tiga pilihan untuk menangani elemen web dinamis. Kita sudah membahas teknik pertama i. e. , menangani perubahan properti elemen web melalui XPath dinamis. Hari ini kita akan mempelajari metode kedua i. e. , menulis Pemilih CSS dinamis untuk menangani perubahan elemen web. Nanti kita akan bahas teknik ketiga lewat Sizzle di postingan blog selanjutnya

Table of Contents Show

Mana yang sangat efisien dan andal, Dynamic XPath atau Dynamic CSS Selector?
Alat yang diperlukan untuk menghasilkan Pemilih CSS
Format umum untuk Pemilih CSS
Pemilih CSS Dinamis dengan menggunakan ID
Pemilih CSS Dinamis dengan menggunakan Nama Kelas
Pemilih CSS Dinamis dengan menggunakan Atribut
Pemilih CSS Dinamis dengan menggunakan Banyak Atribut
Pemilih CSS Dinamis dengan menggunakan Berisi
Pemilih CSS Dinamis dengan menggunakan Mulai – Dengan
Pemilih CSS Dinamis dengan menggunakan Berakhir – Dengan
Bagaimana cara menerapkan CSS ke ID dinamis?
Bisakah Anda menambahkan CSS ke ID?
Bagaimana cara membuat CSS dinamis?
Bagaimana cara mengubah nilai CSS secara dinamis?

Mana yang sangat efisien dan andal, Dynamic XPath atau Dynamic CSS Selector?

Sebagian besar insinyur otomasi di planet ini akan merekomendasikan penggunaan Pemilih CSS untuk menemukan elemen web. Menemukan elemen web yang berubah melalui pemilih CSS lebih cepat daripada XPath dinamis. Berikut ini adalah beberapa logika dalam peluru

Setiap browser memiliki mesin berbeda untuk XPath yang membuat elemen tidak konsisten
CSS selalu sama terlepas dari browsernya
Terkadang XPath menjadi kompleks, sedangkan CSS selalu sederhana
Pemilih CSS Dinamis berperforma lebih baik

Kami telah membahas 9 pelacak untuk mengidentifikasi elemen web untuk aplikasi web apa pun. Di antara pencari lokasi tersebut, Pemilih CSS dinamis dan XPath dinamis memiliki keunggulan dalam industri otomasi. Anda harus cukup cerdas dalam mengidentifikasi elemen web dinamis

Alat yang diperlukan untuk menghasilkan Pemilih CSS

Kami telah membahas plug-in Firebug dan Firepath untuk Mozilla Firefox. Silakan merujuk ke artikel sebelumnya di XPath di mana saya telah membahas instalasi Firebug dan Firepath

Format umum untuk Pemilih CSS

tagName[attributeName=’value’]

Pemilih CSS Dinamis dengan menggunakan ID

Gunakan simbol '#' (hash) untuk menghasilkan CSS Selector dengan ID-nya

tagname #id

Example:

Input #identifierid

_

Pemilih CSS Dinamis dengan menggunakan Nama Kelas

Menggunakan '. ’ (titik) untuk menghasilkan CSS Selector dengan nama kelasnya

tagname .className

Example:

div . Xb9hP

Pemilih CSS Dinamis dengan menggunakan Atribut

Berikut adalah rumus umum untuk menulis CSS Selector dengan atribut dan nilainya

tagname[attribute=’value’]

Example:

input[id='identifierId']

Pemilih CSS Dinamis dengan menggunakan Banyak Atribut

Rumus umum untuk menulis pemilih CSS dengan banyak atribut

tagname[attribute1=’value1’] [attribute2=’value2’]

Example:

input[id='identifierId'][name='identifier']

_

Pemilih CSS Dinamis dengan menggunakan Berisi

Gunakan simbol '*' (bintang) untuk menghasilkan Pemilih CSS dengan berisi

tagname[attribute*=’value’]

Example:

a[title*='How to write']

Pemilih CSS Dinamis dengan menggunakan Mulai – Dengan

Gunakan simbol '^' (tanda sisipan) untuk menghasilkan CSS Selector dengan start-with

tagname[attribute^=’value’]

Example:

a[title^='How to write']

_

Pemilih CSS Dinamis dengan menggunakan Berakhir – Dengan

Gunakan simbol ‘$’ (dollar) untuk menghasilkan CSS Selector dengan end-with

tagname[attribute$=’value’]

Example:

a[title$='Selenium IDE']

Sekarang dengan artikel ini, Anda menjadi dalang dalam menemukan elemen web dinamis apa pun di Selenium WebDriver. Karenanya, Anda dapat menangani properti dinamis elemen web apa pun dengan dua metode, XPath dan CSS Selector. Itu sepenuhnya tergantung pada kebijaksanaan Anda untuk memilih teknik Pemilih CSS atau teknik XPath atau beberapa pencari lokasi langsung lainnya. Saya akan sangat menyarankan Anda untuk mempraktikkannya sekali dengan beberapa POC pada aplikasi web pilihan Anda

Model Objek CSS (CSSOM), bagian dari DOM, memaparkan antarmuka khusus yang memungkinkan manipulasi sejumlah besar informasi mengenai CSS. Awalnya didefinisikan dalam rekomendasi Gaya DOM Level 2, antarmuka ini sekarang membentuk spesifikasi, Model Objek CSS (CSSOM) yang bertujuan untuk menggantikannya

Dalam banyak kasus, dan jika memungkinkan, praktik terbaik adalah memanipulasi kelas secara dinamis melalui properti className karena tampilan akhir dari semua kait penataan dapat dikontrol dalam satu lembar gaya. Kode JavaScript seseorang juga menjadi lebih bersih karena alih-alih didedikasikan untuk detail gaya, ia dapat berfokus pada semantik keseluruhan dari setiap bagian yang dibuat atau dimanipulasi, membiarkan detail gaya yang tepat ke lembar gaya. Namun, ada kasus di mana memperoleh atau memanipulasi aturan dapat berguna (baik untuk seluruh stylesheet atau elemen individual), dan hal itu dijelaskan lebih detail di bawah ini. Perhatikan juga bahwa, seperti gaya DOM elemen individu, ketika berbicara tentang memanipulasi lembar gaya, ini sebenarnya tidak memanipulasi dokumen fisik, tetapi hanya representasi internal dari dokumen tersebut.

Objek style dasar memperlihatkan antarmuka Stylesheet dan CSSStylesheet. Antarmuka tersebut berisi anggota seperti insertRule, selectorText, dan

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

0 untuk mengakses dan memanipulasi aturan gaya individual yang membentuk lembar gaya CSS

Untuk sampai ke objek style dari

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

2, Anda dapat menggunakan properti

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

3 dan mengakses objek individu berdasarkan indeks (e. g. ,

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

_4 adalah stylesheet pertama yang ditentukan untuk dokumen, dll. )

Dalam contoh ini latar belakang halaman diatur ke merah menggunakan CSS. JavaScript kemudian mengakses properti menggunakan CSSOM dan mengubah latar belakang menjadi biru

<html lang="en">
  <head>
    <title>Modifying a stylesheet rule with CSSOM</title>
    <style>
      body {
        background-color: red;
      }
    </style>
    <script>
      const stylesheet = document.styleSheets[0];
      stylesheet.cssRules[0].style.backgroundColor = "aqua";
    </script>
  </head>
  <body>
    The stylesheet declaration for the body's background color is modified via
    JavaScript.
  </body>
</html>

Daftar properti yang tersedia di DOM dari properti style diberikan di halaman Daftar Properti CSS DOM

Untuk mengubah gaya ke dokumen menggunakan sintaks CSS, seseorang dapat menyisipkan aturan atau menyisipkan tag

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

6 yang properti

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

7 diatur ke CSS yang diinginkan

Properti elemen style (lihat juga bagian "Objek Gaya DOM" di bawah) juga dapat digunakan untuk mendapatkan dan menyetel gaya pada elemen. Namun, properti ini hanya mengembalikan atribut gaya yang telah ditetapkan sebaris (mis. g. ,

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

_9 mengembalikan string "

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

0", atau langsung untuk elemen itu menggunakan

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

1, meskipun mungkin ada gaya lain pada elemen dari stylesheet)

Selain itu, saat Anda menyetel properti ini pada suatu elemen, Anda mengganti gaya apa pun yang telah disetel di tempat lain untuk properti khusus elemen yang Anda setel. Mengatur properti

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

_2, misalnya, akan mengesampingkan pengaturan yang dibuat di tempat lain untuk properti

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

2 elemen tersebut di bagian kepala, atau style sheet eksternal. Namun, ini tidak akan memengaruhi deklarasi properti lainnya untuk gaya elemen tersebut, seperti padding atau margin atau font, misalnya

Untuk mengubah gaya elemen tertentu, Anda dapat mengadaptasi contoh berikut untuk elemen yang ingin Anda gaya

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

_

Metode

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

_4 pada objek

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

5 mengembalikan semua gaya yang sebenarnya telah dihitung untuk sebuah elemen

Objek style mewakili pernyataan gaya individual. Objek gaya diakses dari

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>simple style example</title>

    <script>
      function alterStyle(elem) {
        elem.style.background = "green";
      }

      function resetStyle(elemId) {
        const elem = document.getElementById(elemId);
        elem.style.background = "white";
      }
    </script>
    <style>
      #p1 {
        border: solid blue 2px;
      }
    </style>
  </head>

  <body>
    <!-- passes a reference to the element's object as parameter 'this'. -->
    <p id="p1" onclick="alterStyle(this);">
      Click here to change background color.
    </p>

    <!-- passes the 'p1' id of another element's style to modify. -->
    <button onclick="resetStyle('p1');">Reset background color</button>
  </body>
</html>

_2 atau dari elemen yang menerapkan gaya tersebut. Ini mewakili gaya in-line pada elemen tertentu

Lebih penting dari dua properti yang disebutkan di sini adalah penggunaan objek style untuk menyetel properti gaya individu pada elemen

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

Media dan jenis gaya dapat diberikan atau tidak

Perhatikan bahwa Anda juga dapat mengubah gaya elemen dengan mendapatkan referensi ke sana dan kemudian menggunakan metode

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

9 untuk menentukan properti CSS dan nilainya

const el = document.getElementById('some-element');
el.setAttribute('style', 'background-color:darkblue;');

Ketahuilah, bagaimanapun, bahwa

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

_9 menghapus semua properti style lainnya yang mungkin sudah ditentukan dalam objek style elemen. Jika

const el = document.getElementById('some-element');
el.setAttribute('style', 'background-color:darkblue;');

_3 elemen di atas memiliki atribut style in-line katakanlah

const el = document.getElementById('some-element');
el.setAttribute('style', 'background-color:darkblue;');

5, nilai itu akan dihapus dengan menggunakan

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Style Property Example</title>
    <link rel="StyleSheet" href="example.css" />
    <script>
      function setStyle() {
        document.getElementById("d").style.color = "orange";
      }
      function resetStyle() {
        document.getElementById("d").style.color = "black";
      }
    </script>
  </head>

  <body>
    <div id="d" class="thunder">Thunder</div>
    <button onclick="setStyle()">Click here to change text color</button>
    <button onclick="resetStyle()">Reset text color</button>
  </body>
</html>

9

Bagaimana cara menerapkan CSS ke ID dinamis?

Pemilih CSS Dinamis dengan menggunakan ID. Gunakan simbol '#' (hash) untuk menghasilkan CSS Selector dengan ID tagname #id Contoh. Masukan #identifierid. .

Pemilih CSS Dinamis dengan menggunakan Atribut. .

Pemilih CSS Dinamis dengan menggunakan Berisi. .

Pemilih CSS Dinamis dengan menggunakan Mulai – Dengan. .

Pemilih CSS Dinamis dengan menggunakan Berakhir – Dengan

Bisakah Anda menambahkan CSS ke ID?

pemilih ID CSS . Kemudian letakkan properti gaya yang ingin Anda terapkan ke elemen dalam tanda kurung. To use an ID selector in CSS, you simply write a hashtag (#) followed by the ID of the element. Then put the style properties you want to apply to the element in brackets.

Bagaimana cara membuat CSS dinamis?

Dalam artikel ini, kita akan melihat cara membuat kelas CSS secara dinamis dan menerapkannya ke elemen secara dinamis menggunakan JavaScript. Untuk melakukannya, pertama-tama kita membuat kelas dan menugaskannya ke elemen HTML tempat kita ingin menerapkan properti CSS . Kita bisa menggunakan properti className dan classList di JavaScript.

Bagaimana cara mengubah nilai CSS secara dinamis?

Jika Anda ingin mengubah gaya CSS secara dinamis, Anda harus melampirkan bagian kode ini ke beberapa peristiwa . Misalnya, jika Anda ingin mengubah gaya elemen Anda saat mengklik tombol, Anda harus mendengarkan event klik terlebih dahulu dan melampirkan fungsi yang berisi kode sebelumnya.

kode css