css-vars的后备

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）;东西）

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

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

Answer 1

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

所以要适当地回退你会做的值

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

Answer 2

您可以提供后备默认值

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

所以这种方式的默认值是它的30px但是如果--size_1它不是空的它将覆盖30px

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

这是您更新的codepen与后备

Answer 3

您可以在定义变量时执行此操作，并且只提供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 4

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

在你的CSS中添加这个。