有没有一种简单的方法来为字符串的最后几个字符添加样式？

Question

我有一些浮点数，希望能表明最后几位数字并不重要。我的想法是这样的。

对于数字273.978：

<span style="font-weight:bold">273.9</span><span style="color:#3399ff">78</span>

如果有类似于“nth-last-chars”的CSS选择器就好了，这样我就可以在CSS文件中设置它，而不是在JavaScript中截取数字。有更好的方法实现吗？

编辑：这是一个本地JavaScript解决方案的示例：

<span id="numstart" style="font-weight:bold">123.4</span><span id="numend" style="color:#3399ff">57</span>

<script>
var newnum = 273.978;
var numStr = String(newnum)
var numLen = numStr.length;
var newStart = numStr.substring(0,numLen-2);
var newEnd = numStr.substring(numLen-2,numLen);
document.getElementById("numstart").innerHTML = newStart;
document.getElementById("numend").innerHTML = newEnd;
</script>

- mjhm

---

仅使用CSS的解决方案，或者您接受JavaScript吗？ - stef

CSS会很好，但我对此并不乐观，所以我会采用最好的JavaScript解决方案。我正在使用YUI3，但我认为这并不重要。 - mjhm

我认为没有严格的CSS解决方案。你在这里提出的解决方案基本上是我会做的，也可以想象任何JavaScript解决方案基本上都会这样做。 - scrappedcola

Answer 1

我和Stef有同样的想法:

<style type="text/css">
    .number {
        font-family: monospace;
    }
    .number:after {
        background-color: rgba(255,255,255,0.5);
        content: "";
        display: inline-block;
        height: 1em;
        width: 1.2em;
        position: relative;
        top: 0.25em;
        right: 1.2em;
    }
</style>

<span class="number">273.978</span>

- drudge

Answer 2

就我个人而言，使用jQuery实现：

<script type="text/javascript">
$('.numbers').each(function() {
    $(this).html(
        $(this).html().substr(0, $(this).html().length-2)
          + "<span style='color: #3399ff'>"
          + $(this).html().substr(-2)
          + "</span>");
});
</script>

这里有一个演示它的代码片段（链接）。很抱歉这不是纯JavaScript，但我相信这里的人可以提供本地解决方案，如果这个不能解决你的问题。

更新：这里还有一个非jQuery解决方案，以及另一个演示它的代码片段（链接）。我还将样式分离到CSS中。

<style type="text/css">
.unimportant {
    color: #3399ff;
}
</style>

<script type="text/javascript">
var numberTargets = document.getElementsByClassName('number');
for(i=0; i<numberTargets.length; i++) {
    var html = numberTargets[i].innerHTML;
    numberTargets[i].innerHTML = html.substr(0, html.length-2)
      + "<span class='unimportant'>"
      + numberTargets[i].innerHTML.substr(-2)
      + "</span>";
}
</script>

- David Smith

Answer 3

除了服务器端方法（最简单的方法）之外，您还可以添加一个覆盖层 span，其 width: 1.75em; background-color: rgba(255,255,255,0.5) 并将其固定在容器对象的右侧，并且 z-index 大于主浮动显示对象。

如果您感到有实验性，可以尝试使用 HTML5 的 <input type="number" step="0.1" /> 元素，根据浏览器的不同，它会根据其值四舍五入到最近的值。

- stef

---

这似乎比JavaScript方法更冒险。不过，如果你能通过一个例子来解释清楚，我可能会被说服。我现在并不是很想尝试实验性的东西 ;) - mjhm

是的 - 我会选择服务器端的。 - stef

Answer 4

你可以使用PHP为前3/4个字符的span标记添加一个类（我假设你正在使用php生成这些浮点数），并为其余部分添加不同的类，

然后只需将类添加到CSS文件中，以根据您希望突出显示的方式进行突出显示即可。

据我所知，没有CSS选择器可以满足您的要求，“nth”选择器更适用于标记、类和ID，而非单个字符。

编辑： 在JavaScript中，可以通过使用foo.charAt（N）来完成此操作；

因此，将您的字符串加载到一个变量中：

var foo=[number generation code];
var foo0=foo.charAt(0);
var foo1=foo.charAt(1);
var foo2=foo.charAt(2);
var foo3=foo.charAt(3);

然后，您可以将字符打印到代码中的适当位置。

- Myles Gray

---

这些数字都是严格的客户端数据。 - mjhm