Skip to main content Accessibility Feedback

Revisiting the data-options data attribute

Yesterday, I posted about a technique I use to set multiple JavaScript plugin options with a single data attribute.

Todd Motto identified a few issues with the implementation I recommended:

  • If you break your attributes across multiple lines, as shown in my demo, the code breaks.
  • It converts everything into a string, including booleans and numbers.

Todd recommended the use of JSON instead.

Markup

<a 
class="example" 
href="#" 
data-options='{
                "speed": 500,
                "easing": "easeInOutCubic",
                "offset": 0,
                "updateURL": false
              }'
>
    link
</a>

JavaScript

var getDataOptions = function ( options ) {
    return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
};

var item = document.querySelector('.example');
var options = getDataOptions( item ? item.getAttribute('data-options') : null );

console.log(options);
// Returns: Object{speed: 500, easing: "easeInOutCubic", offset: 0, updateURL: false}

This approach requires that the data-options attribute is valid JSON, which is not inherently a bad thing but does make it a bit easier to work with for developers not familiar with that format.

Regardless, I’m converted my plugins that use the data-options approach over to this implementation.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips