<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .item { width: 40px; height: 40px; } .red { background: red; } .green { background: green; } .blue { background: blue; } .yellow { background: yellow; } </style> <script> document.addEventListener( "click" , function(event) { let item = event.target.closest('.item'); if(!item) return; document.body.style.backgroundColor = item.classList[1]; //document.body.style.backgroundColor = getComputedStyle(item).backgroundColor; }); </script> </head> <body> <div class="item red"></div> <div class="item green"></div> <div class="item blue"></div> <div class="item yellow"></div> </body> </html>