Learning jQuery 3 - Fifth Edition

Writing a CSS hook

The code in Listing 12.14 injects a CSS property called glowColor onto the page. This has no effect on the page at the moment, as such a property does not exist. Instead, we are going to extend $.cssHooks to add support for this newly invented property. We will add a soft glow around the text using the CSS3 text-shadow property when glowColor is set on an element:

(($) => {  $.cssHooks.glowColor = {    set(elem, value) {      elem.style.textShadow = value == 'none' ?        '' : `0 0 2px ${value}`;    }  };})(jQuery);

Listing 12.15

A hook consists of a get method and a set method for an element. To keep our example as brief and simple as possible, we are only defining set at this time.

With this hook in place, we now have a 2-pixel soft ...