← #17 Avoid to use colons and periods in the id attribute
#18

Visualize elements on page with the outline style

Topics: DOM, JavaScript

The outline property is useful when you want to visualize elements on the page. In the following sample code, we iterate over all the elements and set the outline property with a random hex color:

const randomColor = () => (
`#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`
);

[].forEach.call(
document.querySelectorAll('*'),
ele => ele.style.outline = `1px solid ${randomColor()}`,
);

Of course, you will need an opposite command to reset the outline property:

[].forEach.call(
document.querySelectorAll('*'),
ele => ele.style.removeProperty('outline')
);

You can change the selector from * to whatever you want to match the set of particular elements, for example:

// Set the outline for links only
[].forEach.call(
document.querySelectorAll('a'),
...
);
Fix a typo or suggest an improvement
#19 Get rid of escaping quotes with template literal