javascript - 在 html5 仪表元素中显示额外信息；在仪表内嵌套元素？

Question

我使用 meter 元素来显示 1 到 10 之间的分数，在最新的 webkit 浏览器中，它看起来棒极了。

我现在也想显示平均分。虽然知道我的投稿获得 6 分(满分 10 分)很有用，但如果知道这本杂志到目前为止的平均分是 5 分会更有用。

不幸的是，slew of available attributes for the meter tag不包括“平均”。

我想在平均值处显示一条简单的垂直线。我想也许我可以在仪表内放置一个 span 或一个 div，让它显示: block ，并给它一个 100% 的高度、50% 的宽度和一个右边框。不幸的是，Chrome 11 甚至不允许我在仪表内嵌套 block 元素，我的初步调查表明。

如果必须的话，我愿意使用 JS 来显示垂直线(当我最初设想这个功能时，我认为我会完全使用 JS)，但是 meter 标签非常令人愉快，我拒绝 < em>现在不使用它。

Answer 1

一个技巧可能是在 meter 标签之后放置一个 span，使用一些算法将它向左移动

<meter id="m" value="2" min="0" max="10">somevalue</meter>
<span id="average" 
      style="border-left:1px solid black;width:1px;margin-left:-50px">
</span>

算术可能是这样的:

var average = [somevalue, say 0.45];
document.getElementById('average').style['margin-left'] = 
 (Math.floor((average-1)*document.getElementById('m').offsetWidth))+'px'