1

Considerando:

strong {font-size: 36px}
    <div id="conteiner">
       <div class="meu-valor">
          <strong>125,74</strong>
       </div>
        
       <div class="meu-valor">
          <strong>125,54</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,84</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,90</strong>
       </div>
    
       <div class="meu-valor">
          <strong>126,65</strong>
       </div>
    </div>

Como eu poderia fazer para mudar apenas o estilo dos três últimos caracteres da string entre a tag strong? Isso usando javascript, jquery ou css...

Desde já agradeço pela ajuda!

3 Respostas 3

2

Podes usar assim:

document.querySelectorAll('.meu-valor strong').forEach(el => {
  const [int, dec] = el.textContent.trim().split(',');
  el.outerHTML = `<span>${int}<strong>,${dec}</strong></span>`;
});

O que isso faz é substituir o HTML desse strong original por outro como vêz na template string. Assim, sabendo todos os strong que queres mudar, podes substituir um a um.

document.querySelectorAll('.meu-valor strong').forEach(el => {
  const [int, dec] = el.textContent.trim().split(',');
  el.outerHTML = `<span>${int}<strong>,${dec}</strong></span>`;
});
strong {
  font-size: 36px
}
<div id="conteiner">
  <div class="meu-valor">
    <strong>125,74</strong>
  </div>

  <div class="meu-valor">
    <strong>125,54</strong>
  </div>

  <div class="meu-valor">
    <strong>125,84</strong>
  </div>

  <div class="meu-valor">
    <strong>125,90</strong>
  </div>

  <div class="meu-valor">
    <strong>126,65</strong>
  </div>
</div>

1
  • Poxa... muito bom! Obrigado pelo feedback. Vou estudar mais pra compreender esse código com perfeição. Mas muito obrigado mesmo.
    – Ivan Gomes
    Commented 27/04/2019 às 3:47
0

Aqui tem um exemplo utilizando o Jquery. Ele vai pegar o conteúdo dentro do strong e criar um novo HTML. No exemplo, foi aplicada uma tag font para mudar a cor dos 3 últimos caracteres.

<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
  crossorigin="anonymous"></script>
<style type="text/css">  
strong {font-size: 36px}
</style>
<div id="conteiner">
       <div class="meu-valor">
          <strong>125,74</strong>
       </div>
        
       <div class="meu-valor">
          <strong>125,54</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,84</strong>
       </div>
    
       <div class="meu-valor">
          <strong>125,90</strong>
       </div>
    
       <div class="meu-valor">
          <strong>126,65</strong>
       </div>
    </div>
	
<script type="text/javascript">
$( document ).ready(function() { 
   $('strong').html(function(idx, oldHtml) {
    var startStr = oldHtml.substring(0, oldHtml.length - 3);
    var endStr = '<font color=#FF0000>' + oldHtml.substring(oldHtml.length - 3) + '</font>'
    return startStr + endStr;

});
});

</script>

0

Use uma função jQuery

Um exemplo de função jQuery para mudar o estilo CSS dos X últimos caracteres dentro de uma determinada tag HTML.

// tagName é o nome da tag html que você quer mudar
// classNames é uma string com todas as classes CSS que serão aplicadas aos caracteres
// howMuch é o número de caracteres do final da tag que vestirão as classNames
function modifyLastChars(tagName = 'strong', classNames = '', howMuch = 0) {

    $(tagName).each((index, element) => {
        let content = $(element).text().trim();
        let breakPoint = content.length - howMuch;
        let initialCaracters = content.substring(0, breakPoint);
        let lastCaracters = content.substring(breakPoint);

        $(element).html(
            initialCaracters +
            '<span class="' + classNames + '">' +
                lastCaracters +
            '</span>'
        );
    });
}

Como usar

$(document).ready(() => {
    modifyLastChars('strong', 'uma-classe-css outra-classe-css', 2);
});

Esse exemplo de uso vai colocar as classes css escolhidas nos últimos dois caracteres (os dois números depois da vírgula) de todas as tags strong do seu HTML.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .