经过 4 小时的反复试验，我无法找到一种方法来获取由百分比定义的圆的宽度并将其转换为像素 并使圆圈的高度与宽度相同(以像素为单位)。以下是我现在所拥有的。 (我已经尝试了很多变体，但无法弄清楚)现在它只适用于我的屏幕。我在其他设备上试了一下，高度不对。此按钮是在 onload 时创建的。
示例:Circle Width = 12%，a 上的12%像素值屏幕是“70px”。因此，以某种方式使 Circle Height = 70px。
<!DOCTYPE html>
<head>
<title>Circle Test</title>
<meta charset='UTF-8'>
<script type="text/javascript" src="/js/fs"></script>
</head>
<body>
</body>
</html>
// Creates a button
var mainButton = document.createElement("button");
mainButton.style.width = "10%";
// Get the Screens Avaliable Width and Get 10% of it and convert it to pixels
var wad = screen.availWidth * .1 + "px";
// Thinking this would return the pixel amount the circle button is, but it only works on the regular screen and not when resized. It also does not work for mobile.
console.log(wad);
mainButton.style.height = wad;
最佳答案
您将按钮的宽度设置为 10% of its containing block's width , 高度为 width 的 10%的 one of
- The available area of the rendering surface of the output device, in CSS pixels.
- The area of the output device, in CSS pixels.
- The area of the viewport, in CSS pixels.
这些很可能是对两种不同事物的测量，或者调整窗口大小会影响其中一件事而不影响另一件事。幸运的是，CSS 有一个“窗口宽度百分比”的单位:vw .以 vw 为单位设置按钮的高度和宽度，并且不需要任何 JavaScript:
button {
width: 10vw;
height: 10vw;
border-radius: 50%;
}<button>Go</button>如果您的意思是按钮的宽度是其容器的 10%，即使其容器没有整个窗口那么宽，您也可以使用 padding-bottom technique detailed in this answer .与 height 不同，padding 中的百分比 refer to the width of the containing block :
.wrapper {
width: 40%; /* here I use 40% instead of 10% for aesthetics */
padding-bottom: 40%; /* should match width */
position: relative;
}
.wrapper > button {
display: block;
position: absolute;
width: 100%;
top: 0;
bottom: 0;
border-radius: 50%;
}
/* the rest is just to make figuring out
the exact width of the button difficult */
body {
display: flex;
align-items: stretch;
height: 90vh;
}
body > div {
flex: 1 1 0;
background: rebeccapurple;
margin: 0 4px;
}<div>
<div class="wrapper"><button>Go</button></div>
</div>
<div></div>
<div></div>最后，为了完整起见，如果您真的必须从 JavaScript 获取计算宽度，您可以使用 window.getComputedStyle :
let button = document.querySelector('button');
let width = window
.getComputedStyle(button)
.getPropertyValue('width');
console.log(button.style.height = /* DO NOT DO THIS */ width);button {
width: 40%;
border-radius: 50%;
}
/* the rest is just to make figuring out
the exact width of the button difficult */
body {
display: flex;
align-items: stretch;
height: 90vh;
}
body > div {
flex: 1 1 0;
background: rebeccapurple;
margin: 0 4px;
}<div>
<button>Go</button>
</div>
<div></div>
<div></div>但是，如果您尝试将其放入调整大小处理程序中，性能将会受到影响。
关于javascript - 获取由像素百分比定义的圆圈宽度并将其应用于高度值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48134391/