javascript - 在 JavaScript 中将宽度和高度设置为百分比

Question

这是我的 JavaScript 代码：

a.width = a.width ? a.width : 640;
a.height = a.height ? a.height : 360;

我怎样才能制作 640px 和 360px 的百分比呢？我希望它们都是窗口大小的 70%。

Answer 1

如果已经指定了大小，那么您可以简单地在 CSS 中使用百分比container。element例如：

.#my-el {
    width: 70%;
    height: 70%;
}

<div id="my-el"></div>

但是，如果您出于某种原因必须使用 JavaScript，则可以执行以下操作：

el.style.width = Math.round(document.documentElement.clientWidth * .70) + 'px';

但是，您可能必须使用更复杂的方法来确定跨浏览器支持的视口大小，但这个问题已经得到解答。

Answer 2

百分比是一个relative值。

您需要具有像 screenWidth （假设）1240px这样的相对值，以便您获得该值的百分比。

例子

var pixels = 100;
var screenWidth = window.screen.width;
var percentage = ( screenWidth - pixels ) / screenWidth ; // 0.92%