<style> 标签中的变量？答案

【问题标题】：Variables in <style> tag?<style> 标签中的变量？
【发布时间】：2021-11-19 06:11:03
【问题描述】：

SvelteKit 组件的标签中是否可以包含变量？例如，我可以让它工作：

<div class="mainContent" style="background-image: url('{backgroundImage}');">

但以下不是：

<style>
    main {
        background-image: url('{backgroundImage}');
        height: 85vh;
    }
</style>

是否有可能让后者工作？我问是因为我希望能够在该背景图像上设置一个 :before，我不认为可以内联完成。

谢谢！

【问题讨论】：

这能回答你的问题吗？ Can I set svelte style css attribute values using variables passed in to a component

标签： javascript css svelte sveltekit

【解决方案1】：

据我所知，我会使用

let backgroundImage = '..../../'

<div class="mainContent" style="--bg-img: url({backgroundImage})">


<style>
    main {
        position: relative;
        background-image: var(--bg-img);
        ....
    }
    
    main::before {
        content: "";
        position: absolute; 
        width: 100px;
        height: 100px;
        background-image: var(--bg-img);
        ....
    }
</style>

【讨论】：

谢谢你的作品！无论如何在 main:before 中使用变量？
嗨，@sylargaf。是的你可以。我已经编辑了答案。看看吧。
你是最棒的，谢谢:)
不客气 :)

【解决方案2】：

您可以使用 css 属性（变量）作为

<style>
    main {
        background-image: var(--backgroundImage);
        height: 85vh;
    }
</style>

然后您可以使用 javascript as 动态设置此属性的值

document.documentElement.style.setProperty(
          "--backgroundImage",
          "url(myimage.png)"
        );

【讨论】：