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.


                "speed": 500,
                "easing": "easeInOutCubic",
                "offset": 0,
                "updateURL": false


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 );

// 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.

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

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

Get Daily Developer Tips