get a property value form a custom font axis in js-CodePudding

I got in my css this custom font, and I would like to get in my js the custom font axis "YTRA" in order to be able to increment it on scroll.

<p > HELLO </p>

css file:

.test {
  font-size: 5.5rem;
  line-height: 1.2;
  font-family: 'vrf';
  font-variation-settings: "wght" 76.9721, "wdth" 437.395246, "opsz" 32.4196, "XOPQ" 106.063, "XTRA" 371.5, "YOPQ" 44.4875, "YTLC" 600, "YTSE" 13, "GRAD" 88, "XTCH" 926.111, "YTCH" 1068.3, "YTAS" 808.611, "YTDE" 238.611, "YTUC" 924.583, "YTRA" 908.333;  
}

here is my js:

const one = document.querySelector(".one");
CSSStyleDeclaration = getComputedStyle(one);
    const font = CSSStyleDeclaration.fontVariationSettings;

ps:: (the console.log(font) gives me in the console that: "GRAD" 88, "XOPQ" 106.063, "XTCH" 926.111, "XTRA" 371.5, "YOPQ" 44.4875, "YTAS" 808.611, "YTCH" 1068.3, "YTDE" 238.611, "YTLC" 600, "YTRA" 908.333, "YTSE" 13, "YTUC" 924.583, "opsz" 32.4196, "wdth" 437.395, "wght" 76.9721);

please, do you know how can Ι get the YTRA value?

const fontAxis = font.getPropertyValue("YTRA");

does not work, it says that getPropertyVAlue is not a function :ς

thanks in advance

CodePudding user response：

CSSStyleDeclaration.fontVariationSettings is a string, so you can create method like this, for searching by key.

    const one = document.querySelector(".one");
    CSSStyleDeclaration = getComputedStyle(one);
    const font = CSSStyleDeclaration.fontVariationSettings;
    const getByKey = (key) => {
      let keyValues = new Map();
      let tempArr = font.split(',');
      tempArr.forEach(x => {
        let keyVal = x.trim().split(' ');
        keyValues.set(keyVal[0], keyVal[1]);
      });
      return keyValues.get(key);
    }
    
    console.log(getByKey('"YTRA"'));

CodePudding user response：

You can use string match feature

const one = document.querySelector(".one");
const CSSStyleDeclaration = getComputedStyle(one);
const font = CSSStyleDeclaration.fontVariationSettings;

console.log(font.match(/YTRA"\s*(\d (\.\d )?)/)?.[1]);

.test {
  font-size: 5.5rem;
  line-height: 1.2;
  font-family: 'vrf';
  font-variation-settings: "wght" 76.9721, "wdth" 437.395246, "opsz" 32.4196, "XOPQ" 106.063, "XTRA" 371.5, "YOPQ" 44.4875, "YTLC" 600, "YTSE" 13, "GRAD" 88, "XTCH" 926.111, "YTCH" 1068.3, "YTAS" 808.611, "YTDE" 238.611, "YTUC" 924.583, "YTRA" 908.333;
}

<p > HELLO </p>