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

您的codepen存在很多问题，因此我将清理您的代码，并提供一个工作示例。

以下是一些重要变化：

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

你可以编写一些条件来获取计算出的width或height值，但我觉得将默认值放在:root中会更清晰。
由于您设置的值类似于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>

单击操纵CSS变量

1 个答案: