How to target the element; when prototyping CSSStyleDeclaration?

Viewed 14

As we know element.style.removeProperty(property) only remove one property at a time. So, I created a utility function for removing multiple properties at once. I extended CSSStyleDeclaration.prototype.

Code

declare global {
  interface CSSStyleDeclaration {
    removeProperties(...properties: Array<string>): void
  } 
}

CSSStyleDeclaration.prototype.removeProperties = function (...properties: Array<string>) {
  for (let i = 0; i < properties.length; i++) {
    /* LOGIC */
    /* element.style.removeProperty(properties[i]) */
  }
}

// USE CASE
document.querySelector('div').style.removeProperties('top', 'right', 'bottom', ...)

Now the main question is How do I target the element from which I have to remove properties ??

1 Answers

Sadly, it doesn't work like that. Unless you make a new CssStyle. What you should do is make a new function that takes up an element's style as and arguement and properties as strings.

Related