将字符串转换为 HTMLElement

Question

我希望通过在 HTML 中定义仪表组件来绘制 canvas gauge，但在绘制页面后激活绘制机制。

user documentation 说这可以通过执行以下操作来实现

<script>window.GAUGES_NO_AUTO_INIT = true;</script>
<script src="../gauge.min.js"></script>

并定义 canvas 仪表，然后使用 BaseGauge.fromElement(canvasGaugeElement);

绘制它

我定义了一个 canvas 元素

<canvas class='canv' id='canv0' data-width=200 data-height=80 value=75 data-type='linear-gauge'></canvas>

我可以成功绘制仪表

BaseGauge.fromElement(canv0);

如果我想同时画很多canvas个仪表，我可以

BaseGauge.fromElement(canv0);
BaseGauge.fromElement(canv1);
BaseGauge.fromElement(canv2);

不过我想使用下面的代码：

$('.canv').each(function(i, obj) {BaseGauge.fromElement($(this).attr('id'));});

但是这失败了，因为 BaseGauge.fromElement 需要一个 HTMLElement 而不是 String

知道如何解决这个问题吗？

Answer 1

您可以进行如下操作：

document.getElementsByClassName('canv').forEach((element) => BaseGauge.fromElement(element));

Answer 2

您正在传递在每个循环中获得的对象的 id 属性...因为 BaseGauge 需要一个对象，您只需传递对象本身：

$('.canv').each(function(i, obj) {BaseGauge.fromElement(this);});

并且应该有效。

Converting String to HTMLElement