2
<select>
  <option>Arial</option>
  <option>Open Sans</option>
  <option>Roboto</option>
  <option>Calibri</option>
  <option>Helvetica</option>
</select>

<textarea id="text"></textarea>

Como posso através de um onclick aterar a fonte do textarea acima de acordo com o option?

Obrigado!

1 Resposta 1

2

Acho que seria mais organizado teres classes de CSS para essas fontes assim:

.serif {
    font-family: Times, "Times New Roman", Georgia, serif;
}

.sansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.monospace {
    font-family: "Lucida Console", Courier, monospace;
}

.cursive {
    font-family: cursive;
}

.fantasy {
    font-family: fantasy;
}

e depois com JavaScript adicionar ou remover a classe. Poderia ser algo assim:

var textarea = document.getElementById('text');
var select = document.querySelector('select');
select.addEventListener('change', function() {
    [].forEach.call(select.children, function(opt, i) {
        textarea.classList.toggle(opt.value, i == select.selectedIndex);
    });
});

jsFiddle: https://jsfiddle.net/m5yev3ez/

Este código percorre todas as options e usando o .classList.toggle() coloca ou remove a classe consoante o index da option a ser iterado seja o mesmo que select.selectedIndex, ou seja a opção escolhida.

Isto partindo do presuposto que dás a cada option o value correspondente a cada classe. Por exemplo: <option value="fantasy">Fantasy</option>

1
  • Valeu no caso text sendo o textarea épuxado pelo elemento posso estanciar uma fonte para ele e depois ele altera? Exemplo textarea { font-family: Arial; } 26/08/2016 às 17:26

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 .