Today I Learned - Rocky Kev

TIL adding a helper function for CSS classes

POSTED ON:

TAGS: css javascript utility

I like this helper.
This lets you quickly add/remove CSS classes to your elements in a easy-to-read way.

function addClass(elems, ...classes) {
	// Add the .color-blue class
	for (let elem of elems) {
		elem.classList.add(...classes);
	}
}

function removeClass(elems, ...classes) {
	for (let elem of elems) {
		elem.classList.remove(...classes);
	}
}

let p = document.querySelectorAll('p');
addClass(p, 'color-blue', 'text-large'); // add two classes to the p element

Via https://gomakethings.com/how-to-create-vanilla-javascript-helper-functions-to-add-and-remove-classes-from-multiple-elements/

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')