Vamos desenvolver colorir Letras, textareas e botões.

Desenvolvendo colorir Titulo.

Note que o h1 se refere ao tamanho do título, sendo que podemos aplicar o h1, h2, h3, h4, h5 e h6. (Todos são de tamanhos diferentes.)

Você poderá criar um id para inserir em seu código, no caso eu coloquei o colorirTitulo1A .
O botão onclick também será com o mesmo id que foi colocado no h1.
Já o script pode ser alterado de modo que se comportará de várias formas na medida do desenvolvimento de um projeto.

<!DOCTYPE html>
<html>
<body>
<h1 id="colorirTitulo1A">Colorir esse titulo</h1>
<button onclick="colorirTitulo1A()">colorir</button>
<script>
function colorirTitulo1A() {
document.getElementById("colorirTitulo1A").style.color = "#990000";
}
</script>
</body>
</html>

Veja o resultado abaixo:

Colorir esse titulo

<!DOCTYPE html><html><body><table border="1"> <tr><td><h1 style="color:#fff;" id="colorirTitulo1A"> Colorir esse titulo</h1> <center> <button style="font-size:15px;text-align:center;cursor:pointer;"onclick="colorirTitulo1A()">colorir</button></center> </td></tr> </table> <script>function colorirTitulo1A() {document.getElementById("colorirTitulo1A").style.color = "#990000";}</script></body></html>
Veja outros modelos que fiz abaixo:

Colorir Titulo 1

Colorir Titulo 2

Colorir Titulo 3

<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr><td>
<table border="1">
<tr><td>
<h1 style="color:#fff;"id="colorirTitulo1A1">
Colorir Titulo 1</h1>
<center>
<button style="background:#990000;font-size:15px;text-align:center;cursor:pointer;"onclick="colorirTitulo1A1()">colorir</button></CENTER>
</td></tr>
</table>
<table border="1">
<tr><td>
<h1 style="color:#fff;"id="colorirTitulo2A2">
Colorir Titulo 2</h1>
<center>
<button style="background:#ff00ff;font-size:15px;text-align:center;cursor:pointer;"onclick="colorirTitulo2A2()">colorir</button></CENTER>
</td></tr>
</table>
<table border="1">
<tr><td>
<h1 style="color:#fff;"id="colorirTitulo3A3">
Colorir Titulo 3</h1>
<center>
<button style="background:#42e342;font-size:15px;text-align:center;cursor:pointer;"onclick="colorirTitulo3A3()">colorir</button></CENTER>
</td></tr>
</table>
<script>
function colorirTitulo1A1() {
    document.getElementById("colorirTitulo1A1").style.color = "#990000";
}
function colorirTitulo2A2() {
    document.getElementById("colorirTitulo2A2").style.color = "#ff00ff";
}
function colorirTitulo3A3() {
    document.getElementById("colorirTitulo3A3").style.color = "#42e342";
}
</script>
</td></tr>
</table>
</body>
</html>

O maior Colorir textarea Simples (modelo 1)

Colorir fonte simples (modelo 2)

Colorir toda a página (modelo 3)

Colorir fundo do Textarea (modelo 4)

Textarea com cores nas letras (modelo 5)

Colorir dentro do textarea (modelo 6)

Colorir dentro do textarea (modelo 7)

<form name="forminha">
<div class="dropdown-link">
<ul class="datalist AreaSmiles"style="width:177px; height:100px; overflow-y:scroll;border-radius:2px;align:left">
<table width="117" border="1">
<tr>
<td width="23"><div onclick="javascript:subColorer(' Rosa ')" />
<div class="Rosa" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#F78181';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Branco ')" />
<div class="Branco" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#FFFFFF';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Vermelho ')" />
<div class="Vermelho" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#FF0000';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Lilás ')" />
<div class="Lilas" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#BF00FF';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Amarelo ')" />
<div class="Amarelo" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#F3F781';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Azul ')" />
<div class="Azul" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#0080FF';">
</div>
</div>
</td>
</tr>
<tr>
<td width="23"><div onclick="javascript:subColorer(' Marrom ')" />
<div class="Marrom" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#8A4B08';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Laranja ')" />
<div class="Laranja" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#FE9A2E';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Verde ')" />
<div class="Verde" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#74DF00';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Cinza ')" />
<div class="Cinza" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#BDBDBD';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Mostarda ')" />
<div class="Mostarda" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#B18904';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Musgo ')" />
<div class="Musgo" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#688A08';">
</div>
</div>
</td>
</tr>
<tr>
<td width="23"><div onclick="javascript:subColorer(' Céu ')" />
<div class="Ceu" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#81F7F3';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Sol ')" />
<div class="Sol" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#FFBF00';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Fluorencente ')" />
<div class="Fluorencente" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#64FE2E';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Pink ')" />
<div class="Pink" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#FF00BF';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' katChup ')" />
<div class="katChup"onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#B40404';">
</div>
</div>
</td>
<td width="23"><div onclick="javascript:subColorer(' Vinho ')" />
<div class="Vinho" onclick="javascript:document.querySelector('#forminha-subColorer').style.background = '#8A084B';">
</div>
</div>
</td>
</tr>
</table>
<br/>
</ul>
<testarea id="forminha-subColorer"style="background:transparent;width:680px;height:100px;font-family: Georgia, Times New Roman, serif; font-size: 15px;font-center:50%;color:#ffffff;bottom:100%;border-radius:12px;"name="subColorer" />Clique nos botões para mudar a cor do textarea (modelo 8)</teStarea>
</div>
</form>
<script language="javascript">
function subColorer (which) {
document.forminha.subColorer.value = document.forminha.subColorer.value + which;
}
</script>

Colorir a página toda (modelo 8)

Botão simples Colorir dentro do textarea (modelo 9)

quinta-feira, 26 de novembro de 2015

Função Colorir

Colorir esse titulo

Colorir Titulo 1

Colorir Titulo 2

Colorir Titulo 3

Um comentário:

Comentários dos visitantes

Comentários Disqs e blogger

Formulário teclado

Barra Lateral colorida Scrool

ESTILO DE TODOS OS TEXTAREAS

Script destacar links

LightBox Facebook

Zoopin chat

oculto

oculto