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

Setting width and height as a percentage in JavaScript

本文关键字：高度 设置 百分比 JavaScript      更新时间：2023-09-26

这是我的JavaScript代码：

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

我如何改为640像素和360像素的百分比？我希望它们都是窗户大小的70%。

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

.#my-el {
    width: 70%;
    height: 70%;
}
<div id="my-el"></div>

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

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

然而，您可能需要使用更复杂的方法来确定跨浏览器支持的视口大小，但这个问题已经得到了回答。

百分比是relative值。

你需要有一个相对值，比如screenWidth（假设）1240px，这样你就可以得到这个值的百分比。

示例

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

要将元素的宽度或高度设置为百分比，有几个选项可用。

首先，您可以将元素的尺寸设置为其容器的百分比，如下所示：

element.width = "70%";
element.height = "70%";

或者，您可以将尺寸设置为屏幕大小的百分比，如下所示：

element.width = "70vw";
element.height = "70vh";

这些值代表"；视口高度"；以及"；视口宽度"；。

然而，由于这两个选项都使用基本的CSS值，因此最好将CSS类动态添加到元素中，而不是直接在JavaScript中设置其样式属性。例如：

element.classList.add("my-class");

然后，在样式表中定义.my-class选择器，如下所示：

.my-class {
  width: 70%;
  height: 70%;
}
相关文章：