Script para dar clic en elementos y mostrar su propiedad de display

displayprop.js

document.addEventListener('DOMContentLoaded', () => {
  function getDisplayValue(element) {
    let displayValue = window.getComputedStyle(element.target).display
    return displayValue
  }
  document.body.querySelectorAll('*').forEach(element =>
    element.addEventListener('click', e => {
      let value = getDisplayValue(e)
      if (value === 'inline') {
        e.target.classList.toggle('outlineInline')
      }
      if (value === 'block') {
        e.target.classList.toggle('outlineBlock')
      }
      if (value === 'flex') {
        e.target.classList.toggle('outlineFlex')
      }
      if (value === 'grid') {
        e.target.classList.toggle('outlineGrid')
      }
      e.stopPropagation()
    }),
  )
  let notes = document.createElement('div')
  notes.classList.add('notes')
  notes.innerHTML = `<ul>
    <li data-display="inline">inline</li>
    <li data-display="block">block</li>
    <li data-display="flex">flex</li>
    <li data-display="grid">grid</li>
  </ul>`
  document.body.appendChild(notes)
  notes.addEventListener('click', e => {
    let child = e.currentTarget.children[0]
    console.dir(child)
    child.classList.toggle('sr-only')
    e.stopPropagation()
  })
})