Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Biel.

deixar letra colorida

Por , em Desenvolvimento frontend

Recommended Posts

Biel.    9

Biel.
Postado
deixar letra colorida
Boa noite a todos . Pessoal gostaria de deixar a letra
verde ao selecionar aluno e
vermelho ao selecionar estudante 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

</style>

</head>
<body>

<select name="aprendiz" >
<option selected="selected">preto</option>
    <option>aluno</option>
    <option >estudante</option>
</select>

</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

bdexterholland    0

bdexterholland
Postado

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">

</style>

<script type="text/javascript">
    function mudaCor() {
        elem = document.getElementById('aprendiz');
        if (elem.value == 'aluno') { elem.style.backgroundColor = 'green'; elem.style.color = 'white';}
        if (elem.value == 'estudante') { elem.style.backgroundColor = 'red'; elem.style.color = 'white';}
    }


</script>

</head>
<body>

<select id="aprendiz" onchange="javascript:mudaCor()">
<option selected="selected">preto</option>
    <option value="aluno">aluno</option>
    <option value="estudante">estudante</option>
</select>

</body>
</html>

 

 

O código merece aperfeiçoamento mas o objetivo é mostrar que você pode usar JavaScript para modificar propriedades de estilo dos elementos. Observe que usei ID no luga do name para o select e defini valores para as opções do select.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito