Contents
1 register css custom properties
if ('registerProperty' in CSS) {CSS.registerProperty({ name:'--color', syntax:'< color>', // The list syntax can be represented here:'+', inherits: true, initialValue:'rgba(0, 0, 0, 1)' // initialValue:'rotate(90deg) translateX (5rem)' }) }
2 Get css custom variable
const el = document.querySelector('. card'); const styleMap = el.computedStyleMap(); const computedProp = styleMap.get('--size'); console.log(computedProp); //? CSSUnitValue {unit: "px", value: 10}/ / Or const attributeProp = el.attributeStyleMap.get('--size'); // Both computedStyleMap and attributeStyleMap can be used to get the attribute set, but computedStyleMap is read-only. Parsing the attribute always returns the pixel value.
3 Set css custom variables
el.style.setProperty('--size', new CSSUnitValue(computedProp .value,'vw')); const propValue = el.style.getPropertyValue('--size'); console.log(propValue);//? 10vw
Contents