将字符串转换为 HTMLElement答案

【问题标题】：Converting String to HTMLElement将字符串转换为 HTMLElement
【发布时间】：2021-08-26 11:13:23
【问题描述】：

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

user documentation 表示可以通过以下方式实现

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

并定义画布仪表，然后使用BaseGauge.fromElement(canvasGaugeElement);进行绘制

我定义了一个画布元素

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

我可以成功地画出仪表做

BaseGauge.fromElement(canv0);

如果我想同时绘制多个画布仪表，我可以这样做

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

但我想使用以下代码：

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

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

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

【问题讨论】：

只需尝试将$(this).attr('id') 替换为$(this)[0]，我认为它会起作用。您拥有元素并获得 Id... 只需传递元素本身。哦...或者最好离开 this...$(this)[0] 是多余的。
@ZeroWorks 甚至BaseGauge.fromElement(this);
@evolutionxbox 是的...我意识到自己并编辑了我的评论... :)
谢谢！您的解决方案都有效。如果这是作为解决方案发布的，我会接受！
@evolutionxbox，请发帖... ;)

【解决方案1】：

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

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

并且应该可以工作。

【讨论】：

【解决方案2】：

你可以这样做：

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

【讨论】：