嗨，我正在寻找在页面上指定大量对象的宽度并将每个对象的宽度显示为文本的方法。主要目的是避免多次引用任何地方的宽度(无论是在 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% 的范围内)作为文本显示(需要注意的是，我需要为一页上的数千个小对象执行此操作)。
为要获取宽度的所有div 设置一个公共类。
然后选择所有然后getElementsByClassName()循环
遍历每个获得其宽度。
找到childrenspan并将字符串添加到其中。
见下文
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>JS的问题在于您引用了object1但<div>的名称是object。
当浏览器遇到错误时，脚本的执行将停止。这意味着您的任何代码都没有运行，因为错误位于(函数代码)的第一行。