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

为要获得宽度的所有div设置一个公共类然后使用var d = '<a> href="javascript:void(0)" class="removeRow"</a>选择全部绕过每一个得到它的宽度找到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;
  }
}

Answer 2

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

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

2 个答案: