我正在尝试使用javascript计算圆的半径。我有以下css部分
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 70px;
background: red;
}

<section class="circle"></section>
&#13;
此圆的宽度和高度为100x100。 如何计算其半径?
答案 0 :(得分:2)
由于半径只是直径的一半,这很容易。直径为100px,每width
和height
。因此,半径为100px / 2 = 50px。
答案 1 :(得分:1)
如果您只需要设置半径以形成完美的圆,请使用50%
半径。这样它不依赖于宽度/高度,你不需要javascript:
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
<section class="circle"></section>
答案 2 :(得分:1)
虽然您可以按border-radius: 50%
相对设置半径,但您只需将width
/ height
框除以2
即可获得半径。
例如:
var circle = document.querySelector('.circle'),
radius = circle.offsetWidth / 2;
circle.innerHTML = "Radius: " + radius + "px";
&#13;
.circle {
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%; /* I don't know if you really need to get the value of this */
background: red;
line-height: 100px;
text-align: center;
}
&#13;
<section class="circle"></section>
&#13;