Question

我正在使用javascript插件（http://bernii.github.io/gauge.js/）。

该插件运行正常，但我只能通过使用（getElementById）使其工作我希望能够在同一页面上拥有此插件的多个实例（不重复每个代码的代码），但所有其他javascript选择器（getElementByClass），（querySelectorAll）等返回NODE 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”数组？

Answer 1

这个问题的答案非常简单，与节点和元素没有任何关系。

我写的是“getelementbyclass”而不是“getelementbyclassname”（语法错误）
“value”作为字符串输入到插件中，因此未正确输入插件。我需要添加parseInt才能工作。

Answer 2

在您的情况下，您也可以使用：

user_friends

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

2 个答案: