如何获取html元素的宽度并将像素转换为百分比[关闭]

Posted 2023-05-09

【中文标题】如何获取html元素的宽度并将像素转换为百分比[关闭]

【英文标题】：How to get width of a html element and convert from pixel to persentage [closed]

【发布时间】：2021-10-19 15:10:30

【问题描述】：

如何将 html 元素的宽度从像素转换为百分比（相对于屏幕尺寸）

例如从 DOM 中获取这个元素（屏幕宽度为 1366px）：

<div style="width:683px">hello</div>

并转换为这个元素（683px 是 1366px 的 50%）：

<div style="width:50%">hello</div>

【问题讨论】：

为什么不从 50% 开始？

因为元素是由像素库在运行时生成的，我想将其转换为 '%' 单位。

【参考方案1】：

您可以使用 querySelector 获取元素的宽度，然后除以屏幕宽度：

const div = document.querySelector('.div');
div.style.width = `$(div.offsetWidth / screen.width) * 100%`;

.div
background: black;
height: 60px;
width: 683px;

<div class="div"></div>

【参考方案2】：

你可以抓取当前窗口的宽度，然后分割它。

function getWidth()
let width = window.innerWidth;
let half = width * 0.50;

随心所欲地使用它。

【讨论】：

谢谢，但屏幕大小和元素宽度是完全动态的。

【参考方案3】：

获取元素的宽度

var divWidth = document.getElementById("mydiv").offsetWidth

屏幕宽度已经在screen.width

获取百分比值

percentDivWidth = divWidth * 100 / screen.width;

然后只替换宽度

document.getElementById("mydiv").style.width = percentDivWidth + '%';

我没有尝试过，但它应该可以工作，这不依赖于 jQuery 或其他库。