将多个元素的宽度显示为文本的最佳方法答案

【问题标题】：Best ways to display width of multiple elements as text将多个元素的宽度显示为文本的最佳方法
【发布时间】：2018-09-01 06:56:08
【问题描述】：

您好，我正在寻找方法来指定页面上大量对象的宽度，并将每个对象的宽度显示为文本。主要目的是避免在任何地方（无论是在 HTML、CSS 还是 JS 中）多次引用宽度，但我需要在一页上可能有数千个这样的对象（目前我指定了 div 的宽度和其中的文本它 - 效率太低了！）。

到目前为止，我有这个：https://jsfiddle.net/ghostfood/d6acdhq6/17/

<body onLoad="myFunction()">
<div id="object1" class="voteshare1" style="width:40.6%;">
This one is <span id="percentage1"></span></div>
<div id="object2" class="voteshare2" style="width:20.4%;">
This one is <span id="percentage2"></span></div>
<div id="object3" class="voteshare3" style="width:10.2%;">
This one is <span id="percentage3"></span></div>

<script>
function myFunction() {
var x1 = document.getElementById("object1").style.width;
var x2 = document.getElementById("object2").style.width;
var x3 = document.getElementById("object3").style.width;
document.getElementById("percentage1").innerHTML = x1;
document.getElementById("percentage2").innerHTML = x2;
document.getElementById("percentage3").innerHTML = x3;
}
</script>
</body>

宽度必须是百分比，但理想情况下不会在显示的文本中包含百分比符号（不知道它是如何做到的，因为这是我在网上找到的一个例子，然后做了一些修改——我不太了解 JS）。

我已经简要地查看了 D3 和 amcharts，但我不确定它们是否最适合在一个页面上处理数百个小型堆叠条形图，并且有很多我需要的 CSS 控件。我很可能是错的！

总结：帮助我找出一种更有效的方法来获取和显示对象的（百分比）宽度（在 HTML 或 JS 中手动设置，范围为 10% 到 100%）作为文本（需要注意的是，我需要为一页上的数千个小对象执行此操作）。

【问题讨论】：

标签： javascript html arrays width display

【解决方案1】：

为所有要获取宽度的 div 设置一个通用类。
用getElementsByClassName()选择所有然后
遍历每一个得到它的宽度。
找到 children span 并将字符串添加到其中。
见下文

function myFunction() {
  var elements = document.getElementsByClassName("voteshare");
  for (var i = 0; i <  elements.length; i++){
    var thisElement = elements[i];
    var thisWidth = thisElement.style.width.toString();
    thisElement.children[0].textContent += thisWidth;
  }
}

<body onLoad="myFunction()">
<div id="object1" class="voteshare" style="width:40.6%;"> 
  <span id="percentage1">This one is </span>
</div>
<div id="object2" class="voteshare" style="width:20.4%;">
  <span id="percentage2">This one is </span>
</div>
<div id="object3" class="voteshare" style="width:10.2%;">            
  <span id="percentage3">This one is </span>
</div>
</body>

【讨论】：

感谢您的快速回复，效果很好！

【解决方案2】：

JS 的问题是您引用了object1，但<div> 的名称是object。
当浏览器遇到错误时，脚本的执行将停止。这意味着您的任何代码都没有运行，因为错误出现在（函数代码的）第一行。

【讨论】：

它没有回答他的问题，它只是帮助修复错误或拼写错误。
我有一个过时的 JSFiddle URL - 你现在应该看到它可以工作了。谢谢！