Properties

We've dealt with a few properties already: innerHTML of a node, src of an image, and id of a node. There is a vast array of properties available to us, so let's take a peek at how CSS marries with JavaScript.

Just for the sake of argument, let's change our Animals program to use JavaScript to change the background color of the target instead of CSS (https://github.com/PacktPublishing/Hands-on-JavaScript-for-Python-Developers/tree/master/chapter-6/animals-2):

const images = {
  'path': 'images/',
  'dog': 'dog.jpg',
  'cat': 'cat.jpg',
  'elephant': 'elephant.jpg',
  'horse': 'horse.jpg',
  'panda': 'panda.jpg',
  'rabbit': 'rabbit.jpg'
}

const buttons = document.querySelectorAll('.flex-item');

buttons.forEach((button) => {
  button.addEventListener('mouseover', (e) => {
    e.target.style.backgroundColor = ...