gpt4 book ai didi

javascript - 如何使用 javascript 获取 Element 对象数组

转载 作者:行者123 更新时间:2023-12-03 07:58:52 25 4
gpt4 key购买 nike

我正在使用 javascript 仪表插件 ( http://bernii.github.io/gauge.js/ )。

该插件工作完美,但我只能通过使用 (getElementById) 使其工作我希望能够在同一页面上有此插件的多个实例(无需为每个实例重复代码),但所有其他 javascript 选择器 (getElementByClass)、(querySelectorAll) 等返回节点对象列表,而不是“ELEMENT OBJECTS”,如 (getElementById) 方法所做的那样。

var opts ={
lines: 12,
angle: 0.15,
lineWidth: 0.44,
pointer: {
length: 0.9,
strokeWidth: 0.035,
color: '#000000'
},
limitMax: 'false',
colorStart: '#6FADCF',
colorStop: '#8FC0DA',
strokeColor: '#E0E0E0',
generateGradient: true
};

// this works
/*
var target = document.getElementById('gauge1');
var value = target.getAttribute('data-level');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 1000;
gauge.animationSpeed = 32;
gauge.set(value);

*/

// this does not work
var target = document.getElementsByClassName('gauge');
for(var i=0; i<target.length; i++)
{
var value = target[i].getAttribute('data-level');
var gauge = new Gauge(target[i]).setOptions(opts);
gauge.maxValue = 1000;
gauge.animationSpeed = 32;
gauge.set(value);
}
<script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas class='gauge' id="gauge1" data-level='900'></canvas>
<canvas class='gauge' id="gauge2" data-level='800'></canvas>
<canvas class='gauge' id="gauge3" data-level='700'></canvas>
</body>
</html>

所以我的问题是:有没有办法在不使用 Id 的情况下获取“ELEMENT OBJECTS”数组?

<小时/>

最佳答案

这个问题的答案很简单,与节点和元素无关。

  1. 我写的是“getelementbyclass”而不是“getelementbyclassname”(语法错误)
  2. “value”作为字符串输入到插件中,因此插件未正确输入。我需要添加 parseInt 并且它起作用了。

关于javascript - 如何使用 javascript 获取 Element 对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34678857/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com