javascript - 通过单击操作 CSS 变量

Question

我想在每次单击元素时将元素属性的值加倍。因此，我正在使用 CSS 变量。所以我正在尝试这样做:

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

还有:

// Vars
var circle_1 = document.querySelector("#circle_1");
var size_1 = document.getPropertyValue("--size_1");

// Function to grow the circle
function growCircle() {
var size_1_n =size_1*2;
  circle_1.style.setProperty("--size_1", size_1_n.value);
}

// Event listener
var el = document.getElementById("circle_1");
el.addEventListener("click", growCircle, false);

你可以在这里看到它https://codepen.io/daiaiai/pen/QQXrGz

什么都没有发生。我认为(至少) var size_1 = document.getPropertyValue("--size_1"); 有问题但我真的想不通。你能指导我一点(很多)吗？

Answer 1

你的代码笔有很多问题，所以我会清理你的代码，并提供一个工作示例。

以下是一些关键变化:

1. 我为变量添加了 :root 声明。这允许我在元素 circle_1 处获取 --size_1 的值。如果没有这个，您将得到 NaN 作为变量的值，因为它没有在样式中的任何地方声明。

   您可以编写一些条件来获取计算出的width 或height 值，但我觉得将默认值放入:root.

2. 由于您设置的值类似于 50px 而不是 50，即带有单位的值，因此您需要先从中获取数字部分，然后才能加倍。为此，我正在使用 parseInt(size_1)。

var circle_1 = document.querySelector("#circle_1");
var size_1 = document.body.style.getPropertyValue("--size_1");

// Function to grow the circle
function growCircle() {
  var size_1 = window.getComputedStyle(circle_1).getPropertyValue("--size_1");
  var size_1_n = parseInt(size_1) * 2;
  circle_1.style.setProperty("--size_1", size_1_n + "px");
}


// Event listener
circle_1.addEventListener("click", growCircle, false);

:root {
  --size_1: 50px;
}

body {
  margin: 100px;
}

#circle_1 {
  width: var(--size_1, 50px);
  height: var(--size_1, 50px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

div span {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
}

<div id="circle_1" draggable="true"><span>Group 1<span></div>

---

对此略有不同的方法是仅在变量的 :root 声明中声明值部分。然后，您可以使用 width: calc(var(--size_1) * 1px) 来引用它的值。

我个人更喜欢这种方法，因为变量只包含值组件，并且您可以在声明样式时应用任何您喜欢的单位。此外，这将允许您避免变量值的 parseInt。

这是该方法的一个片段:

var circle_1 = document.querySelector("#circle_1");
var size_1 = document.body.style.getPropertyValue("--size_1");

// Function to grow the circle
function growCircle() {
  var size_1 = window.getComputedStyle(circle_1).getPropertyValue("--size_1");
  var size_1_n = size_1 * 2;
  circle_1.style.setProperty("--size_1", size_1_n);
}


// Event listener
circle_1.addEventListener("click", growCircle, false);

:root {
  --size_1: 50;
}

body {
  margin: 100px;
}

#circle_1 {
  width: calc(var(--size_1, 50px) * 1px);
  height: calc(var(--size_1, 50px) * 1px);
  border-radius: 50%;
  margin-top: 20px;
  background-color: pink;
  opacity: 0.7;
  display: inline-block;
  transition: 0.3s;
}

div span {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
}

<div id="circle_1" draggable="true"><span>Group 1<span></div>