title: How to override jquery plugin options with html5 data-attributes
body: <p>What I want to do is to set options into plugin like you normally would, but to also override those options with html5 data-attributes.</p>
  
  <p><a href="http://jsfiddle.net/lollero/HvbdL/" rel="nofollow">Here I have exactly that (jsfiddle)</a>, but there's a slight problem with that.</p>
  
  <p>JSFiddle Code:</p>
  
  <pre><code>(function($){
      $.fn.extend({
          test: function(options) {
  
              var defaults = {
                  background: null,
                  height: null
              };
  
              var options = $.extend( defaults, options);
  
              return this.each(function() {
                    var o = options;
                    var obj = $(this);
                    var objD = obj.data();
  
  
                      // background
                      if ( !objD.background) {
                          var cBG = o.background;
                      }
                      else {
                          var cBG = objD.background;
                      }
  
                      // Opacity
                      if ( !objD.height) {
                          var cH = o.height;
                      }
                      else {
                          var cH = objD.height;
                      }
  
                      obj.css({
                          background: cBG,
                          height: cH  
                      });
  
              });
          }
      });
  })(jQuery);
  
  $(document).ready(function() {
      $('.test').test({
  
          background: 'red',
          height: 400
  
      });
  });
  </code></pre>
  
  <p>The method that I'm using in the jsfiddle bloats the code so much, even with just 2 different options that are also using data.</p>
  
  <p><strong>Question is:</strong> How could I achieve same end result with less code, to determine wether or not data should be used? </p>
  
  <hr>
  
  <hr>
  
  <p>Here is the part of the code from the jsfiddle, that determines wether or not to use data.</p>
  
  <pre><code>// objD is obj.data();
  
  // background
  if ( !objD.background) {
      var cBG = o.background;
  }
  else {
      var cBG = objD.background;
  }
  
  // Opacity
  if ( !objD.height) {
      var cH = o.height;
  }
  else {
      var cH = objD.height;
  }
  
  obj.css({
      background: cBG,
      height: cH  
  });
  </code></pre>