in Javascript

Code Snippet: querySelectorAll berdasarnya inline CSS

Sebagai orang yang buta warna parsial, memang sungguh menyebalkan kalau bertemu dengan warna-warna yang tidak kontras. Sehingga aku cukup kesulitan untuk beberapa hal, misalnya secara default warna kursor di game Dota 2 (dan sejenisnya) adalah hijau (kawan) dan merah (lawan), bagi mataku dua warna ini tidak terlalu kontras jadinya sering sulit membedakan. Untungnya di game dota ada opsi ‘color blind mode‘. Sehingga warna hijau diganti biru.

Karena kali ini lagi iseng, mengisi celah ingatan tentang anime/manga One Piece, yang seingetku baru benar-benar kuikuti dari Thriller Bark Saga sisanya adalah episode lompat-lompat yang kutonton sewaktu kebetulan tayang di TV kala itu. Itupun sering diulang-ulang (di GTV), dan tidak sering juga kuikuti.

Aku berpatok pada wiki onepiece.fandom.com untuk menentukan mana saja episode yang harus kutonton. Karena anime One Piece punya banyak episode filler (episode yang tidak ada di manga, dan seringnya tidak canon). Jadi agar lebih cepat nontonnya, aku biasanya melewati jenis episode tersebut. Di wiki sudah dibedakan dengan navigasi warna seperti ini,

Sayangnya, mataku tidak bisa membedakan Color Code untuk Normal dan Filler. Alhasil, beberapa episode filler kutonton dong. Nah, sebagai programmer tentu saja harus ada cara untuk mengakali hal tersebut.

Setelah aku inspect element, ternyata style-nya pake inline dan tidak ada container dengan #id yang unik. Untung aja ada fungsi Javascript document.querySelectorAll() yang bisa kuterapkan di code snippet di bawah ini.

var matches = document.querySelectorAll('td[style="width:5%; text-align:center; background:#CCFFFF;"]');

matches.forEach(function(elm) {
  elm.style.backgroundColor = "red";
});

Kode ini aku eksekusi pakai web console dari browser (developer tools).

Meski aku belum menemukan query string lebih simpel atau bisa wildcard, misalnya style="*background:#CCFFFF;", paling tidak aku sudah bisa membedakan antara episode Normal dan Filler yang kutandai dengan warna merah.

Sebuah kegiatan yang kurang berfaedah ya? Entah kenapa memang, otak ini lebih suka problem solving hal-hal begini ketimbang menyelesaikan pekerjaan. wkwk.

Write a Comment

Comment