Html/Css/Js：在 <i> 标签之前显示文本

Posted 2023-02-16

【中文标题】Html/Css/Js：在 <i> 标签之前显示文本

【英文标题】：Html/Css/Js: Display text before <i> tag

【发布时间】：2015-01-20 07:15:31

【问题描述】：

这是一个相当简单的问题，但我无法找到正确的解决方案。 我正在为我的传单地图绘制图例，我已经走到了这一步：

但是我想在色块之前显示0，而只在色块之后显示4。 我正在使用 i-tags 创建颜色。整个 JS 代码如下所示：

function getColor(d) 
            
              return   d > 4  ?  '#045a8d' : //4
                       d > 3  ?  '#2b8cbe' : //3
                       d > 2  ?  '#74a9cf' : //2
                       d > 1  ?  '#bdc9e1' : //1
                                  '#f1eef6';

    ...

    grades = [0, 1, 2, 3, 4];

...


div.innerhtml += '0 ';


     for (var i = 0; i < grades.length; i++) 
      div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + (!grades[i + 1] ? grades[i] : '');

CSS：

.legend 
    line-height: 18px;
    color: #555;

.legend i 
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 0px;
    opacity: 0.7;

关于如何在颜色前显示 0 有什么建议吗？我敢打赌它很容易，但到目前为止我所尝试的一切都没有奏效。

【问题讨论】：

jsfiddle.net/0tLoL5v2

【参考方案1】：

因为 i 向左浮动，所以它们将 0 向右移动。如果您查看http://jsfiddle.net/73k05k7u/，我已将 0 和 1 放入一个跨度并将它们也向左浮动。所以现在它全部显示为内联。我还接听了将 4 添加到循环之外的调用，因为您可以在循环完成后执行此操作。使其更具可读性并且需要更少的比较。注意最佳实践，您应该构建一个字符串并设置一次 innerHTML 属性。

// CSS
.legend span
    float:left;



// JS
div.innerHTML += '<span>0 </span>';


 for (var i = 0; i < grades.length; i++) 
  div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ';     
 
div.innerHTML = div.innerHTML +  '<span>' +  (grades.length -1)+  '</span>';