css - 如何在 中使用 CSS 变量？

Question

我想在我的 HTML 中使用我的 Bootstrap 断点。我在 :root 中定义了它们。

:root {
    --mq-xs: some value;
    --mq-sm: some value;
    --mq-md: some value;
    --mq-lg: some value;
}

我需要将该元素与多个子元素一起使用。我知道您可以在 style="" 中使用 CSS 变量属性。我想添加一个 media=""属性给那些 <source>元素，并希望我能做到以下几点。

    <picture>
        <source srcset="..." media="(min-width: var(--mq-lg))" />
        <source srcset="..." media="(min-width: var(--mq-md))" />
        <source srcset="..." media="(min-width: var(--mq-sm))" />
        <img class="img-responsive" alt="" src="..." />
    </picture>

没有任何反应。

还有其他方法可以做这样的事情吗？我知道您可以通过 JavaScript 传递 CSS 自定义属性，但这似乎有点过分了。

Answer 1

你不能只在样式属性中调用dom中的css变量css变量只是让你的css文件更容易编写

对于您的问题，您可以使用 javascript，因为我们在这里只使用字符串示例

我建议你暂时忘记 css 变量，因为旧浏览器无法理解它们，最好使用 sass 或更少的预处理来做到这一点。

所以如果你需要动态管理你的 var 你不能使用 css 文件你需要在这里使用 javascript 的一个小例子。

<picture>
        <source class="sources" srcset="..." media="(min-width: var(--mq-lg))" />
        <source class="sources" srcset="..." media="(min-width: var(--mq-md))" />
        <source class="sources" srcset="..." media="(min-width: var(--mq-sm))" />
        <img class="img-responsive" alt="" src="..." />
 </picture>
<script>

var cssVar = {
  xs : 'same value to css var',
  sm : 'same value to css var',
  md : 'same value to css var',
  lg : 'same value to css var'
}

var sources = document.getElementsByClassName('sources')

sources[0].setAttribute('media', cssVar.lg);
sources[1].setAttribute('media', cssVar.md);
sources[2].setAttribute('media', cssVar.sm);

<script/>