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.

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

Get Daily Developer Tips