Esta clase permite insertar JavaScript dentro de una variable de CSS (ver ejemplos). Válido en todos los navegadores excepto Internet Explorer por razones obvias.

Argumentos

element:

• Requerido
  • type: DOM Element Array
  • Explicación: Array de elementos del DOM a los que se aplican las custom properties.

customProperty

• Requerido
  • type: Array (String)
  • Explicación: Array con el nombre de las propiedades CSS a ser computadas por el Helper (con el '--' delante del nombre).

args

• (Opcional)
  • type: JSON Object
  • Explicación: Objeto JSON con los argumentos que recibirán las funciones declaradas en customProperty (si las tienen). El formato será el siguiente:

    {
      "--paramName1": ["arg1","arg2","arg3"],
      "--paramName2": ["arg1"]
    }
  

loop

• (Opcional)
  • type: Bool
  • Explicación: Flag para especificar si se desea ejecutar window.requestAnimationFrame.

constructor(element, customProperty, args, loop = false){ this.element = (element.length && element.length > 0) ? element : [element]; this.customProperty = (customProperty.length && customProperty.length > 0) ? customProperty : [customProperty]; this.lastValue = undefined; this.args = args ? args : undefined;

Funcionamiento

  <div>
    <p>Texto de prueba</p>
  </div>

div{
  --randomColor: () => {
      let red = Math.random() * 255;
      let green = Math.random() * 255;
      let blue = Math.random() * 255;
      return `rgb(${red}, ${green}, ${blue})`;
  };
  background: var(--computeRandomColor);
}

const VALID_SELECTORS = 'p, div, h1, h2, h3, h4, h5, h6';
const REGISTERED_PROPERTIES = ['--randomColor', '--url'];
const REGISTERED_ARGUMENTS = {
    '--url':['imgToUse']
};
new HelperJsInCss(
    document.querySelectorAll(VALID_SELECTORS), // DOM 
    REGISTERED_PROPERTIES, // CustomProperty
    REGISTERED_ARGUMENTS // Args
);

Source

class HelperJsInCss{
  constructor(element, customProperty, args, loop = false){
    this.element = (element.length && element.length > 0) ? element : [element];
    this.customProperty = (customProperty.length && customProperty.length > 0) ? customProperty : [customProperty];
    this.lastValue = undefined;
    this.loop = !!loop;
    this.args = args ? args : undefined;
    if (loop)
        window.requestAnimationFrame(this.checkElements.bind(this));
    else this.checkElements();
  }
  checkElements(){
    for(let i = 0; i < this.element.length; i++){
        let theElement = this.element[i];
        for( let j = 0; j < this.customProperty.length; j++){
          let theProperty = this.customProperty[j];
          let theArgs = this.args ? this.args[theProperty] : undefined;
          const value = window.getComputedStyle(theElement).getPropertyValue(theProperty);
          const computeArguments = [];
          if (theArgs && theArgs.length > 0)
            theArgs.forEach(argumentProperty => {
              const argValue = window.getComputedStyle(theElement).getPropertyValue('--'+argumentProperty);
              computeArguments.push(argValue);
            });
          try{
            const evaluateValue = eval(value)(...computeArguments);
            if (this.lastValue === evaluateValue){
              if (this.loop)
                window.requestAnimationFrame(this.checkElements.bind(this));
              return;
            }
            this.lastValue = evaluateValue;
            const computeName = `--compute${theProperty[2].toUpperCase()}${theProperty.substring(3)}`;
            theElement.style.setProperty(computeName, evaluateValue);
          }catch(err){} // Property hasn't been set. We ignore it
          if (this.loop)
            window.requestAnimationFrame(this.checkElements.bind(this));
        }
    }
  }
}