Question

我想第一次使用CSS变种而正在做

#circle_1 {
  width: 50px;
  height: 50px;
  width: var(--size_1);
  height: var(--size_1);
}

并用JS填充它

var input_1 = document.querySelector("#groesse_1");
var circle_1 = document.querySelector("#circle_1");
input_1.addEventListener("change", function() {
  circle_1.style.setProperty("--size_1", input_1.value);
});

这很好用，但只要用户没有为input_1添加值，圆就有一个未定义的大小（我试图通过在添加宽度之前在CSS中给出默认的高度/宽度来防止这种情况：var（ - size_1）; thing）

如何正确地为该元素添加默认值？

见这里：https://codepen.io/daiaiai/pen/OQYwVW

Answer 1

您可以在定义变量时执行此操作，并且只提供width和height一次：

#circle_1 {
  --size_1: 50px;
  width: var(--size_1);
  height: var(--size_1);
}

在你的事件处理程序中，你还需要指定单位，除非你期望用户输入它们，例如：

circle_1.style.setProperty("--size_1", input_1.value + "px");
// -------------------------------------------------^^^^^^^

......或类似的。

更多on MDN。

直播示例：

var input_1 = document.querySelector("#groesse_1");
var circle_1 = document.querySelector("#circle_1");
input_1.addEventListener("change", function() {
  circle_1.style.setProperty("--size_1", input_1.value + "px");
});

#circle_1 {
  --size_1: 50px;
  width: var(--size_1);
  height: var(--size_1);
  border: 1px solid black;
}

<input id="groesse_1" type="text">
<div id="circle_1"></div>

Answer 2

您可以提供后备默认值

#circle_1 {
  width: var(--size_1, 30px);
  height: var(--size_1, 30px);
}

因此，默认值为30px，但如果--size_1不为空，则会覆盖30px

如果您想在MDN上了解更多vars

以下是您已更新的codepen并附有后备广告

Answer 3

CSS func var()接受两个参数：--var自定义属性和后备值。

所以要正确回退你会做的值

selector {
  prop: 20px; /* for browser without support for variables */
  prop: var(--my_var, 20px); /* for browser with support for variables */
}

Answer 4

:root {
  --size_1:50px;
  --size_2:50px;
}

在你的CSS中添加它。

css-vars的后备

4 个答案: