javascript - 如何将类设置为由自定义工具提示功能创建的 HTML 元素？

Question

我开发了一个折线图，其中包含自定义工具提示功能。对于我的一套技能来说，我使用 SO 作为资源已经很安静了，但现在我在最后一步中遇到了困难。

我想为 html 元素(表格)设置一个类，以便能够修改表格的样式，更具体地说是插入边框间距和左/右对齐。

如何实现将类添加到html对象中？

这是自定义工具提示功能中的相关部分:

      // Set Text
      if (tooltipModel.body) {
        var titleLines = tooltipModel.title || [];
        var bodyLines = tooltipModel.body.map(getBody);
        var innerHtml = '';

        titleLines.forEach(function(title) {
          innerHtml += '';
        });
        innerHtml += '';

        bodyLines.forEach(function(body, i) {
          var colors = tooltipModel.labelColors[i];
          var style = 'background:' + colors.backgroundColor;
          style += '; border-color:' + colors.borderColor;
          style += '; border-width: 2px';
          innerHtml += '<tr>';
          innerHtml += '<td>' + 'Date' + '</td>';
          innerHtml += '<td>' + 'Date_Variable' + '</td></tr>';
          innerHtml += '<tr>';
          innerHtml += '<td>' + 'Venue' + '</td>';
          innerHtml += '<td>' + 'Venue_variable' + '</td></tr>';
          innerHtml += '<tr>';
          innerHtml += '<td>' + 'Round' + '</td>';
          innerHtml += '<td>' + 'Round_variable' + '</td></tr>';
          innerHtml += '<tr>';
          innerHtml += '<td>' + 'Team1' + '</td>';
          innerHtml += '<td>' + 'Team1_variable' + '</td></tr>';
          innerHtml += '<tr>';
          innerHtml += '<td>' + 'Team2' + '</td>';
          innerHtml += '<td>' + 'Team2_variable' + '</td></tr>';
          innerHtml += '<tr>';
          innerHtml += '<td>' + 'Result' + '</td>';
          innerHtml += '<td>' + 'Result_variable' + '</td></tr>';
        });
        innerHtml += '</tbody>';

        var tableRoot = tooltipEl.querySelector('table');
        tableRoot.innerHTML = innerHtml;
      }

预先非常感谢您的帮助。

Answer 1

嗯，看来你可以在 #chartjs-tooltip 里面的表中添加一个类名直接通过document.querySelector("#chartjs-tooltip > table").classList.add("[Your Class]")

或者，因为你已经有了var tableRoot = tooltipEl.querySelector('table'); ，只需添加 tableRoot.classList.add("[Your Class]")下面。