Highlight Specific Elements

29 September 2020

Contents

You can highlight all HTML elements which respond to a specific CSS selector with the following. This can be useful for debugging purposes:

document
  .querySelectorAll(selector)
  .forEach((el) => (el.style.border = 'solid 2px red'))

For example, the following [id] selector will find all elements with an id attribute:

document
  .querySelectorAll('[id]')
  .forEach((el) => (el.style.border = 'solid 2px red'))