css变量-动态请求变量的值

css变量=使用请求得到的数据

<script>
  async init() {
    const reqData = await getData();
    const root = document.documentElement;
    updateVariables(root, {
      'lottery-backPngImg': `url("${reqData.backPngImg || 'https://example.com/resource/placeholder.png'}")`,
      'lottery-backWebpImg': `url("${reqData.backWebpImg || 'https://example.com/resource/placeholder.webp'}")`,
    });
  }

</script>

<style lang="less" scoped>
:root {
  --lottery-backPngImg: '';
  --lottery-backWebpImg: '';
}
  
@supports (background-image: var(--lottery-backWebpImg)) {
  /* WebP支持 */
  .prize-container {
    background-image: var(--lottery-backWebpImg);
    background-size: 100% 100%;
  }
}
</style>

export function updateVariables(element, variables = {}) {
  if (element.nodeType === 1) {
    const { style } = element;
    Object.keys(variables).forEach((key) => {
      style.setProperty(`--${key}`, variables[key]);
    });
  }
}