Por meio de CSS e JavaScript, o código abaixo tem como função alterar o tamanho da fonte do texto, a partir de um clique efetuado pelo usuário:
| 1 | <HTML> |
| 2 | <HEAD> |
| 3 | <TITLE>Script CSS e JavaScript</TITLE> |
| 4 | function TamanhoFonte(num, id){ |
| 5 | { |
| 6 | document.getElementById(id).className = "fonte"+num; |
| 7 | } |
| 8 | </script> |
| 9 | <!-- |
| 10 | body { font-family: verdana; } |
| 11 | #texto { width: 600px; } |
| 12 | .fonte1 { font-size: 12px; } |
| 13 | .fonte2 { font-size: 16px; } |
| 14 | .fonte3 { font-size: 20px; } |
| 15 | --> |
| 16 | </style> |
| 17 | </HEAD> |
| 18 | <BODY> |
| 19 | <span class="fonte1"><a href="#" onclick="TamanhoFonte(1, 'texto')">a</a></span> |
| 20 | <span class="fonte2"><a href="#" onclick="TamanhoFonte(2, 'texto')">a</a></span> |
| 21 | <span class="fonte3"><a href="#" onclick="TamanhoFonte(3, 'texto')">a</a></span> |
| 22 | <span class="fonte1?"><a href="#" mce_href="#" onclick="TamanhoFonte(1, texto)">a</a></span> |
| 23 | <span class="fonte2"><a href="#" mce_href="#" |
| 24 | onclick="TamanhoFonte(2, 'texto')">a</a></span> |
| 25 | <span class="fonte3?"><a href="#" mce_href="#" |
| 26 | onclick="TamanhoFonte(3, 'texto')">a</a></span> |
| 27 | <h4>Titulo</h4> |
| 28 | <p>Texto</p> |
| 29 | </div> |
| 30 | </BODY> |
| 31 | </HTML> |
Para que o código funcione corretamente será necessário inserir os comandos <div id="texto" class="fonte1">, <script type="text/javascript"> e <style type="text/css">, respectivamente, entre as linhas
Provas
Questão presente nas seguintes provas
