title: How to create a function on HTML element instead passing element as parameter
body: <p>I have a function that accepts the element as a parameter, this element will used to perform operations inside function.</p>
  
  <pre><code>function center(element) {
     // code to align this given element to center position
     element.css("position","fixed");
     element.css("top", Math.max(0, ((window.innerHeight - element[0].offsetHeight) / 2))+ "px");
     element.css("left", Math.max(0, ((window.innerWidth - element[0].offsetWidth) / 2))+ "px");
     return element;
  }
  
  // calling above function
  center(element);
  </code></pre>
  
  <p>Here element is passed as parameter. But I don't want to do that. Is it possible to create a function which will be called on element? Example</p>
  
  <pre><code>element.center();
  </code></pre>
  
  <p>You can also consider jQuery functions like: <code>$(element).next();</code> etc.</p>
  
  <p>Note I don't want to use jQuery. I need pure javascript coding.</p>
  
  <p>By using jQuery it can be possible by creating below </p>
  
  <blockquote>
    <p>center function </p>
  </blockquote>
  
  <pre><code>jQuery.fn.center = function () {
     this.css("position","absolute");
     this.css("top", Math.max(0, (($(window).height() - this.height()) / 2)   + $(window).scrollTop())+ "px");
     this.css("left", Math.max(0, (($(window).width() - this.width()) / 2) + $(window).scrollLeft())+ "px");
     return this;
  };
  </code></pre>