@chrisyipw

classList - manipulating element’s classes with pure JavaScript

In the past, if we wanna manipulate an element’s classes, we have to use class attribute and className property.

Because of they’re strings, which means less efficiency and performance.

Although we have third-part libraries to work around it, e.g. jQuery.hasClass or jQuery.addClass, but it’s still less efficiency.

But now, element.classList comes:

element.classList

This property provides the following methods:

  • add
  • contains
  • item
  • remove
  • toggle

Notice that all of them are only accept one valid class name in one invocation, otherwise you will get “INVALID_CHARACTER_ERR” exception.

Notes:

  • if class is already exist, add method will ignore it
  • classList is similar with arguments: you can access one class by classList[0], but can’t use array methods directly, e.g. classList.forEach(fn);

All the modern browsers are support it, but not IE9 or below. Yes, IE8- must die.

View demo

JavaScript shim

CSS3 Tricks

‘cubic-bezier’ timing function

`transition: time property cubic-bezier(p1, p2, p3, p4);’


Flexible ellipses

border-radius: 200px / 150px;

or

border-radius: 50%;


pointer-events

pointer-events: auto;

Detecting ‘pointer-events’ (via verou.me):

var supportsPointerEvents = (function(){
    var dummy = document.createElement('_');
    if(!('pointerEvents' in dummy.style)) return false;
    dummy.style.pointerEvents = 'auto';
    dummy.style.pointerEvents = 'x';
    document.body.appendChild(dummy);
    var r = getComputedStyle(dummy).pointerEvents === 'auto';
    document.body.removeChild(dummy);
    return r;
})();

‘pointer-events’ allows you to control under what circumstances (if any) a particular graphic element can become the target of mouse events.


tab-size

tab-size: 4;

The tab will presents as long as 4 whitespace.

It’s good for article publishing, in the past, we use whitespace or padding to indent paragraphs, but now, you can use tab.