我如何将类设置为由自定义工具提示功能创建的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]")。

Answer 2

https://www.w3schools.com/cssref/css_selectors.asp