Есть ли простой способ стилизовать последние пару символов строки? - PullRequest
Новая
       4

Есть ли простой способ стилизовать последние пару символов строки?

7 голосов
/ 14 января 2011

У меня есть несколько чисел с плавающей точкой, где я хотел бы указать, что последние несколько цифр не так важны. Я имею в виду что-то вроде этого.

Для номера 273,978 

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

Было бы замечательно, если бы было что-то вроде CSS-селектора "nth-last-chars". Тогда я мог бы установить все это в моем файле 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>

Ответы [ 4 ]

6 голосов
/ 14 января 2011

Идея была та же, что и у 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>
3 голосов
/ 14 января 2011

От макушки головы в 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>
1 голос
/ 14 января 2011

Кроме подхода на стороне сервера (самый простой), вы можете добавить оверлейный диапазон, который имеет width: 1.75em; background-color: rgba(255,255,255,0.5) и исправить его справа от объекта контейнера и индекса az, большего, чем основной экранный объект с плавающей точкой.

Если вы чувствуете себя экспериментально, вы можете попробовать элемент HTML5 <input type="number" step="0.1" /> , который в зависимости от браузера будет округляться до ближайшего значения в зависимости от его значения.

0 голосов
/ 14 января 2011

Вы можете использовать PHP, чтобы добавить класс в тег span для первых 3/4 символов (я полагаю, вы используете php для генерации этих чисел с плавающей запятой) и другой класс для чего-либо после этого,

Затем просто добавьте классы в свой CSS-файл, чтобы выделить по своему желанию.

AFAIK Нет CSS-селекторов, чтобы делать то, что вам нужно, n-е - больше для тегов, классов и идентификаторов, чем для отдельных символов.

РЕДАКТИРОВАТЬ: В 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);

Затем вы можетераспечатайте символы в соответствующем месте кода.

...