DEV Community

Cover image for Interaksi JavaScript dan CSS
boibolang
boibolang

Posted on

Interaksi JavaScript dan CSS

JavaScript dapat dipakai untuk memanipulasi property CSS dalam sebuah website sehingga menjadi lebih interaktif. Pertama buatlah file html, css dan tentu saja javascript sederhana sebagai berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Title</title>
  </head>
  <body>
    <header>This is header</header>
    <script src="note.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
:root {
  --color-primary: #fd424b;
}

header {
  color: var(--color-primary);
  font-size: 30px;
  font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

Tampilan awal seperti berikut.

result

Berikut adalah contoh-contoh mainpulasi CSS dengan JavaScript.

Create html element
Untuk membuat elemen html digunakan perintah sebagai berikut.

const message = document.createElement('div'); // Membuat elemen
message.classList.add('cookie-message'); // Memberi nama class
message.innerHTML = 'This is cookie <button class="btn">Close</button>'; // Isi dari elemen <div> yang baru saja dibuat
Enter fullscreen mode Exit fullscreen mode

Setelah elemen html yang diinginkan dibuat selanjutnya adalah menempatkan elemen tersebut. Beberapa metode untuk menempatkan elemen html sebagai berikut :

  • prepend : menempatkan elemen html sebelum elemen lainnya sebagai first-child
  • append : menempatkan elemen html setelah elemen lainnya sebagai last-child
  • before : menempatkan elemen html sebelum elemen lainnya sebagai sibling
  • after : menempatkan elemen html setelah elemen lainnya sebagai sibling

prepend
Dengan perintah sebagai berikut di javascript header.prepend(message); didapatkan hasil sebagai berikut.

result
Jika kita inspect halaman html tersebut, terlihat bahwa elemen <div> yang kita buat menjadi first-child dari <header>.

result

append
Dengan perintah sebagai berikut header.append(message); maka hasilnya sebagai berikut.

result
Kemana elemen <div> yang ada diatas <header> ? Kalau kita inspect halaman didapatkan sebagai berikut.

result
Benar bahwa perintah append membuat elemen menjadi last-child tapi kemanakah elemen <div> yang berada diatas <header> ? Jawabannya adalah karena elemen html yang kita buat merupakan live element jadi akan terus diupdate dan tidak bisa berada pada dua tempat sekaligus. Lantas bagaimana jika kita ingin menampilkan keduanya ? Gunakanlah perintah header.append(message.cloneNode(true)); maka didapat hasil sebagai berikut.

result

result

Perintah header.before(message); dan header.after(message); menghasilkan tampilan yang sama, hanya saja elemen html yang dihasilkan posisinnya akan berbeda sebagai berikut.

before dan after

result

result
Terlihat bahwa posisi div dan header adalah sejajar, dalam DOM disebut sebagai sibling. Silahkan dicoba sendiri untuk metode header.after(message); dan header.after(message.cloneNode(true));.

Delete html element
Tentunya elemen yang dibuat juga harus bisa dihapus. Kita akan menghapus elemen yang tadi dibuat dengan tombol, maka kita membutuhkan event driven method yaitu eventListener.

document.querySelector('.btn').addEventListener('click', function () {
  message.remove();
  // Sebelum adanya remove()
  // message.parentElement.removeChild(message);
});
Enter fullscreen mode Exit fullscreen mode

result

CSS Style
Nilai maupun property dari CSS dapat kita manipulasi dengan JavaScript. Penulisan property di JavaScript untuk memanipulasi CSS menggunakan aturan camel case misalkan kita biasa menulis di CSS backgroud-color maka di JavaScript penulisannya menjadi backgrounddColor.

message.style.backgroundColor = '#5ec576';
message.style.width = '80%';
Enter fullscreen mode Exit fullscreen mode

result
Mengambil nilai dari property CSS.

// Mengambil nilai style
console.log(message.style.color); // Tidak mengembalikan apa-apa
console.log(message.style.backgroundColor); // Output: rgb(94, 197, 118)
Enter fullscreen mode Exit fullscreen mode

Mengapa console.log(message.style.color); tidak mengembalikan nilai apapun ? Itu dikarenakan nilai dari property CSS yang bisa diambil adalah jika CSS tersebut bertipe inline style, jika tidak maka dianggap tidak ada atau berada diluar (eksternal CSS). Supaya eksternal CSS bisa dikenali dan diambil nilai property-nya digunakan perintah sebagai berikut.

// Cara supaya bisa diambil nilai property jika bukan inline style
console.log(getComputedStyle(message).color); // Output: rgb(187, 187, 187)
console.log(getComputedStyle(message).height); // Output: 48.3333px
Enter fullscreen mode Exit fullscreen mode

Hasil dari metode getComputedStyle berupa string untuk menjadikannya Number digunakan metode sebagai berikut.

// getComputedStyle menghasilkan string, gunakan Number.parseFloat
message.style.height = Number.parseFloat(getComputedStyle(message).height, 10) + 30 + 'px';
console.log(getComputedStyle(message).height); // Output: 51.3229px
Enter fullscreen mode Exit fullscreen mode

result

Kita juga bisa merubah custom property atau pre-defined property sebagai berikut.

// Merubah custom property style
document.documentElement.style.setProperty('--color-primary', 'blue');
Enter fullscreen mode Exit fullscreen mode

result

Attribute
Untuk keperluan demo kita tambahkan logo dan button pada file html kita sehingga menjadi seperti ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Title</title>
  </head>
  <body>
    <header>This is header</header>
    <img data-version-number="3.0" designer="john" src="img/logo.png" alt="Bankist logo" class="nav__logo" id="logo" />
    <a class="nav__link--btn" href="#">Click</a>
    <script src="note.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

result
Beberapa metode yang bisa kita pakai sebagai berikut.

// Mendapatkan nilai atribut
const logo = document.querySelector('.nav__logo');
console.log(logo.alt); // Output: Bankist logo
console.log(logo.src); // Output: http://127.0.0.1:5500/img/logo.png, absolute path
console.log(logo.getAttribute('src')); // Output: img/logo.png, relative path
console.log(logo.className); // Output: nav__logo

// Non-standard attribute: attribut yang dibuat sendiri tidak akan dikenali
console.log(logo.designer); // Output: undefined

// Cara supaya dikenali
console.log(logo.getAttribute('designer')); // Output: john

// Setting attribut
logo.alt = 'It is beautiful';
logo.setAttribute('company', 'bankbot');
console.log(logo.alt); // Output: It is beautiful
console.log(logo.getAttribute('company')); // Output: bankbot

const link1 = document.querySelector('.nav__link--btn');
console.log(link1.href); // Output: http://127.0.0.1:5500/index.html#
console.log(link1.getAttribute('href')); // Output: #

// Special atribut: data-
console.log(logo.dataset.versionNumber); // Output: 3.0

// Classes
logo.classList.add('c', 'j'); // Menambahkan class 'c' dan 'd'
// logo.classList.remove('c', 'j'); // Menghapus class
logo.classList.toggle('j'); // Menyembunyikan class 'j' sehingga tersisa class 'nav__logo' dan 'c'
console.log(logo.classList.contains('c')); // Output: true

// Jangan lakukan
// logo.className = 'bobi'; // Akan mengganti semua nama class
Enter fullscreen mode Exit fullscreen mode

Top comments (0)