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 获取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
网友回复
js如何流式输出ai的回答并折叠代码块,点击代码块右侧可预览代码?
ai大模型如何将文章转换成可视化一目了然的图片流程图图表?
大模型生成html版本的ui原型图和ppt演示文档的系统提示词怎么写?
rtsp视频直播流如何转换成websocket流在h5页面上观看?
为啥coze会开源工作流agent coze studio?
如何检测网页是通过收藏夹打开的?
python如何实现类似php的http动态脚本请求处理响应代码?
js如何实现类似php的http动态脚本请求处理响应代码?
trae与solo有啥区别不同?
vue如何让ai动态生成问卷调查多步骤表单式收集基础信息自动规划执行任务?