Estoy tratando de hacer una función que funcione así:
JavaScript:
let elm = document.querySelector('section') elm.gridify(); asumiendo que la función gridify agrega display: grid; al elemento.
Mi pregunta es: ¿es eso posible y, de ser así, cómo?
Intenté esto, y en realidad está funcionando:
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');Ahora, lo que quiero es hacer algo como lo que escribí arriba.
En primer lugar, debe saber que editar prototipo es algo que nunca debe usar, pero esta es la única forma de agregar un método personalizado a los objetos HTMLElement (en su caso):
HTMLElement.prototype.gridify = function() { this.style.display = "grid" }; let div = document.querySelector('#myDiv'); div.gridify(); console.log(div.style.display); // Output // grid Como se sugiere en los comentarios, usar una función gridify que toma su HTMLElement como parámetro es una mejor práctica;)
function gridify(element) { element.style.display = "grid"; } gridify(div); console.log(div.style.display); // Output // grid