A lógica é:
- crie uma função chamada
fontes
que receba como entrada uma frase qualquer
Aqui fica um exemplo minimalista de função
function fontes(frase){
alert(frase); // só para verificar
};
- escreva no corpo da página esta frase usando fontes de tamanhos diferentes (do 1 ao 7)
Aqui precisa de "ir buscar" o corpo da página e guardar numa variável:
var corpo = document.querySelector('body'); // ou outro elemento que queira
- Para isto, você deve fazer um laço que irá repetir a seguinte TAG, alterando apenas o atributo "size"
Ora um for
loop típico é
for (var i = 1; i < 8; i++) {
// fazer qq coisa
}
Neste caso, dentro do loop tem de mudar o css/style do texto. Aqui surge um passo que não está defenido na pergunta: como empacotar a frase? com uma div
, <p>
ou <span>
? ecolha.
Se usar um <p>
o código dentro do loop poderia ser:
corpo.innerHTML += '<p style="font-size: '+i+'em;">'+frase+'</p>';
Código final:
function fontes(frase) {
var corpo = document.querySelector('body');
for (var i = 1; i < 8; i++) {
corpo.innerHTML += '<p style="font-size: ' + i + 'em;">' + frase + '</p>';
}
};
fontes('Olá mundo!');