计算元素列表的 Javascript 像素宽度

Posted 2023-02-22

【中文标题】计算元素列表的 Javascript 像素宽度

【英文标题】：Calculate Javascript pixel widths for list of elements

【发布时间】：2015-11-14 14:09:30

【问题描述】：

我有一个包含 4 个数字的列表。如果我将 100 除以列表的长度，我得到 25。我想将四个元素的宽度设置为这个数字的倍数，例如。第一个是 25px，第二个是 50px，依此类推。

这是我目前写的（伪）代码：

list1,2,3,4
var array = list.split(',');
var width = 100 / array.length;
for (var n = 0; n < array.length; n++) 
  if(array[n]==1) 
    width = width; //here I want width as 25;
    <div style="width:"+Width +"></div>
  
  if(array[n]==2)
    width = width+width;//here I want width as 50
    <div style="width:"+Width +"></div>
  
  if(array[n]==3) )
    width = width+width;//here I want width as 75
    <div style="width:"+Width +"></div>
  
  if(array[n]==4 )
    width = width+width;//here I want width as 100
    <div style="width:"+Width +"></div>
  

【问题讨论】：

在为您的问题命名时，您确实需要更加努力。此外，您的代码原样不会执行，我不确定需要更改哪些内容才能使其执行，因为您似乎随机注入了 html。

您的问题的解释似乎有点不清楚。 =)

首先，您在没有正确表示法的情况下在 javascript 和 html 之间切换。您的代码不知道您要做什么。请务必在返回 javascript 之前停止 HTML 部分（注意结束引号）：</div>"。首先按照这些行编辑您的代码，然后尝试。您可能会取得更大的成功。

【参考方案1】：

您不需要所有这些 if() 测试：

for (var n = 0; n < array.length; n++) 
   width = 25 * (n + 1);
   ...

s0

n = 0   -> width = 25 * (0 + 1) -> 25 * 1 -> 25
n = 1   -> width = 25 * (1 + 1) -> 25 * 2 -> 50
n = 2   -> width = 25 * (2 + 1) -> 25 * 3 -> 75
etc...

【讨论】：

感谢 Marc B 的建议，我很有帮助

【参考方案2】：

不是 100% 确定您的要求，但我认为您只想将宽度乘以 2、3、4，具体取决于 n 是什么。 （转到 Marc B 的答案）

编辑：顺便说一句，当您错误地声明宽度时（我认为）使用大写 W var Width 应该： var width

【讨论】：

实际上这会导致width ≈ 2ⁿ

【参考方案3】：

您似乎混淆了 html 和 javascript 语法。 Html 就是那些<tag> 的东西。

首先，我推荐你this course 或其他一些，只是为了开始使用 JavaScript。

要在 JS 中创建元素，您可以使用document.write，这可能更容易，但只能在文档加载之前使用。你可以这样使用它：

width = 42; //or whatever
document.write('<div style="width: '+width+'px">adsf</div>');

或者更困难但也更灵活的方式——使用DOM。你可以这样做：

var div = document.createElement('div'); //create new element
div.style.width = 42; //set its width to whatever you want
div.textContent = "some text"; //add some text into the div
someElement.appendChild(div); //insert the element into another one

这里的someElement 是您通过调用document.getElementById（或类似函数）获得的元素，或者，如果您希望它们直接在正文中，只需编写document.body。

.

关于@Marc_B's answer，最终代码如下所示：

var list = [1,2,3,4];
var div;
for (var n = 0; n < array.length; n++) 
  div = document.createElement('div');
  div.style.width = 25*n;
  document.body.appendChild(div);