CSSの一般的な方法を動作させるための

1つの登録CSSのカスタムプロパティ

if ('registerProperty' in CSS ) {
    CSS.registerProperty({ 
        name: '--color', 
        syntax: '<color>',  // 此处可以表示列表 syntax: '<transform-function>+',
        inherits: true, 
        initialValue: 'rgba(0, 0, 0, 1)' // initialValue: 'rotate(90deg) translateX(5rem)'
    }) 
}

2つのGET CSSのカスタム変数

const el = document.querySelector('.card'); 
const styleMap = el.computedStyleMap();

const computedProp = styleMap.get('--size'); 
console.log(computedProp); // » CSSUnitValue {unit: "px", value: 10}
// 或
const attributeProp = el.attributeStyleMap.get('--size'); 
// computedStyleMap和attributeStyleMap都可以用来获取属性集，但是computedStyleMap是只读的。解析<length>属性始终返回像素值。

3つのカスタム変数セットのCSS

el.style.setProperty('--size', new CSSUnitValue(computedProp.value, 'vw')); 

const propValue = el.style.getPropertyValue('--size'); 
console.log(propValue);
// » 10vw