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

Question

您好，我正在研究指定页面上大量对象的宽度并将每个对象的宽度显示为文本的方法。主要目的是避免在任何地方（无论是在 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%的范围内）在其中作为文本（需要注意的是我需要对一页上的数千个小对象执行此操作）。

Answer 1

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

Answer 2

为所有想要获得宽度的div设置一个通用的class。
Select 然后全部 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>

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

Best ways to display width of multiple elements as text

html

javascript

arrays

width

display