javascript - CSS中设置的圆半径，如何通过JS获取值？

Question

我正在尝试设计一个显示进度百分比的圆圈作为圆周。我想在 JS 中获取半径，但在 CSS 中设置圆的样式。我用来执行此操作的函数是 setPercent。它通过选择半径元素并从那里获取半径测量来读取圆的半径。

这是有效的代码:

const fn = function() {
  let circle = document.querySelector('circle.percent')
  debugger
  let radius = circle.r.baseVal.value
  let circumference = 2 * Math.PI * radius
  circle.style.strokeDasharray = `${circumference} ${circumference}`


  this.setPercent = function(percent) {
    circle.style.strokeDashoffset = (100 - percent) / 100 * circumference
  }
}
setTimeout(fn, 1)

:root {
  --back-ground: #30384a;
  --neutral-circle-border: #656c79;
  --completed-color: #67ed8b;
  background: var(--back-ground)
}

div.normal_square {
  width: 100px;
  height: 100px;
}

svg.progress-ring {
  margin: 0 auto;
  display: block;
}

svg.progress-ring circle {
  fill: transparent;
  stroke-width: 2;
  stroke: black;
  cx: 50%;
  cy: 50%;
  r: 40%;
}

svg.progress-ring circle.percent {
  transition: all 0.5s ease-out;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

svg.progress-ring circle.background {
  stroke: var(--neutral-circle-border)
}

<div margin="0 auto">
  <svg class="progress-ring" width="200px" height="200px" xmlns="http://www.w3.org/2000/svg">
      <circle class="background"/>
      <circle class="percent" fill="transparent" stroke-width="6" stroke="black" cx="50%" cy="50%" r="40%" />
    </svg>
</div>

但是，当我从我的代码中删除 r="40%" 时，我无法获得从 circle.r... 测量的半径。为什么会发生，我该如何解决？

Answer 1

使用window.getComputedStyle(element)取而代之的是检索值。

当前您正在从元素引用中检索属性值，当您删除该属性时，没有任何内容可检索。