Class Attributes

Question 1

Add single class to element.

element.addClass(‘foo’);

Answer 1

element.classList.add(‘foo’);

Question 2

Add multiple classes

element.addClass(‘a b c’);

Answer 2

element.classList.add(‘a’, ‘b’, ‘c’);

Question 3

Add class(es) to a set of elements

elements.addClass(‘foo’);

Answer 3

ES6

elements.forEach(x => x.classList.add(‘foo’));

ES5

elements.forEach(function(element) { element.classList.add(‘foo’);

});

Question 4

Remove a single class

element.removeClass(‘foo’);

Answer 4

element.classList.remove(‘foo’);

Question 5

Remove multiple classes

element.removeClass(‘a b c’);

Answer 5

element.classList.remove(‘a’, ‘b’, ‘c’);

Question 6

Remove classes from a set of elements.

elements.removeClass(‘foo’);

Answer 6

ES6

elements.forEach(x => x.classList.remove(‘foo’));

ES5

elements.forEach(function(element) { element.classList.remove(‘foo’);

});

Question 7

element.toggleClass(‘foo’);

Answer 7

element.classList.toggle(‘foo’);

Question 8

Conditionally toggle a class

element.toggleClass(‘foo’, codition);

condition result is either true or false

Answer 8

element.classList.toggle(‘foo’, codition);

Question 9

Toggle class on a set of elements.

elements.toggleClass(‘foo’);

Answer 9

ES6

elements.forEach(x => x.classList.toggle(‘foo’));

ES5

elements.forEach(function(element) { element.classList.toggle(‘foo’);

});

Question 10

Check if a single element has a class.

var has = element.hasClass(‘foo’);

Answer 10

var has = element.classList.contains(‘foo’);

Question 11

Check if at least one of the elements in a set of elements has a certain class

var has = elements.hasClass(‘foo’);

Answer 11

ES6

var has = elements.some(x => x.classList.contains(‘foo’));

ES5

var has = elements.some(function(element) { return element.classList.contains(‘foo’);

});