How to create a function like `.querySelector(elm)`?-CodePudding

I'm trying to make a function that works like this:

JavaScript:

let elm = document.querySelector('section')
elm.gridify();

assuming the function gridify adds display: grid; to the element.

My question is: is that possible and, if so, how?

I tried this, and it's actually working:

function gridify() {
  this.gridify = function(element) {
    let myElement = document.querySelector(element)

    myElement.setAttribute('style', 'display: grid;')
    console.log(myElement);
  }
}

var test = new gridify();
test.gridify('section');

Now, what I want is to make something like what I wrote above.

CodePudding user response：

First of all you have to know that edit prototype is something you should never use, but this is the only way to add a custom method to HTMLElement objects (in your case) :

HTMLElement.prototype.gridify = function() { this.style.display = "grid" };

let div = document.querySelector('#myDiv');
div.gridify();

console.log(div.style.display);
// Output
// grid

As suggested in the comments use a function gridify which takes your HTMLElementas parameter is a better practice ;)

function gridify(element) {
    element.style.display = "grid";
}

gridify(div);

console.log(div.style.display);
// Output
// grid