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