时间戳

首页 > 解决方案 > 如何将类设置为由自定义工具提示功能创建的 HTML 元素？

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

问题描述

我开发了一个带有自定义工具提示功能的折线图。对于我的一套技能，我使用 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;
      }

提前非常感谢您的帮助。

标签： javascripthtmlchart.js

解决方案

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

或者，既然你已经有了var tableRoot = tooltipEl.querySelector('table');，就在tableRoot.classList.add("[Your Class]")下面添加。

推荐阅读