Javascript variable as function name

Question

const self = {
        element: document.querySelector(selector),
        html: () => self.element,
        on: (event, callback) => {
            self.element.addEventListener(event, callback);
        },
        style: {
            alignContent: (property) => {
                return (property === null) ? self.element.style.alignContent : self.element.style.alignContent = property;
            }
     }
}

I am trying to make it so I have quick access to all CSS style properties with jQuery like selectors it should work as: select('h1').style.alignContent('center'), but the problem is that I would have to make a seperate function for each style property in order for this method to work, is there a way to solve this problem without duplicating a lot of code?

//Duplication example
color: (property) => {
  return (property === null) ? self.element.style.color : self.element.style.color = property;
}

Gershom Maes · Accepted Answer · 2020-08-04 16:02:14Z

4

One way to do this is with a Proxy (mdn):

let elemWrapper = selector => {
  let element = document.querySelector(selector);
  return {
    element,
    html: () => element,
    on: (event, callback) => {
      element.addEventListener(event, callback);
    },
    style: new Proxy({}, {
      get: (obj, prop) => {
        // The user called a function named "prop"
        // We need to return a function that sets the style property named "prop"
        return cssValue => element.style[prop] = cssValue;
      }
    })
  };
};

let bodyElem = elemWrapper('body');
bodyElem.style.backgroundColor('cyan');

Here to prove the concept I've set the body element's background colour using a dynamically named function.

The big downside to this approach is the poor performance of Proxies (an excellent read on Proxy performance is available here).

This means it may be quicker to simply compile a list of all css property names, and define a function for each (never using Proxies). The following code compiles all css property names, to serve as a starting point:

console.log(Object.keys(document.body.style));

edited Aug 4, 2020 at 16:02

answered Jul 30, 2020 at 16:17

Gershom Maes

8,2273 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Minvy Over a year ago

Why does returning a function cssValue give me the argument?

Gershom Maes Over a year ago

To clarify - are you asking about the return value of bodyElem.style.backgroundColor('...')?

Minvy Over a year ago

return cssValue => element.style[prop] = cssValue; this bit

Gershom Maes Over a year ago

That function takes only a css value, and sets it under a given css property name.

Unmitigated · Accepted Answer · 2020-07-30 16:48:48Z

You can use a Proxy to intercept all attempts to get a property.

let selector = '#test';
const self = {
    element: document.querySelector(selector),
    html: () => self.element,
    on: (event, callback) => {
        self.element.addEventListener(event, callback);
    },
    style: new Proxy(Object.create(null), {
        get(target, prop, receiver) {
            if (self.element.style.hasOwnProperty(prop)) {
                return val => {
                    if (val != null) {
                        self.element.style[prop] = val;
                    } else {
                        return self.element.style[prop];
                    }
                }
            }
            throw Error("No such property exists: " + prop);
        }
    })
};
self.style.color('red')
console.log("Color:", self.style.color());

<div id="test">
This is a test
</div>

You can also wrap this into a general function like so:

const getEnhancedElement = arg => {
  const element = /Element/.test(Object.prototype.toString.call(arg)) ? arg
     : document.querySelector(arg);//accept a HTMLElement or a selector
  return {
    element,
    html: () => element,
    on: (event, callback) => {
      element.addEventListener(event, callback);
    },
    style: new Proxy(Object.create(null), {
      get(target, prop) {
        if (element.style.hasOwnProperty(prop)) {
          return val => {
            if (val != null) {//set value
              element.style[prop] = val;
            } else {//get value
              return element.style[prop];
            }
          }
        }
        throw Error("No such property exists: " + prop);
      }
    })
  };
};
let test = getEnhancedElement("#test");
test.style.color('red')
console.log("Color:", test.style.color());
test.style.textAlign('center');

<div id="test">
  This is a test
</div>

andsilver · Accepted Answer · 2020-07-30 16:22:27Z

0

I would have something like this:

style: {
    chnageStyle: (propertyName, propertyVal) => {
        return (propertyName === null) ? self.element.style[propertyName] : self.element.style[propertyName] = propertyVal;
    }
}

Then you can call this:

style.changeStyle('alignContent','center');
style.changeStyle('color','orange');

edited Jul 30, 2020 at 16:22

andsilver

6,0323 gold badges22 silver badges50 bronze badges

answered Jul 30, 2020 at 16:18

Asutosh

1,8382 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

Javascript variable as function name

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related