Este artigo descreve o método JavaScript para alterar o plano de fundo e a cor da fonte da página da web. Compartilhe para sua referência. A análise específica é a seguinte:
JavaScript, clicando no botão para alterar a cor do plano de fundo e da fonte da página da web. Existem n botões para alterar a cor na página da web. Clicando em botões diferentes, a fonte e o plano de fundo da página da web mudarão para cores diferentes. Applet JavaScript muito simples.
1. Objetivos básicos
Assim que você abrir a página da web, você primeiro solicitará a mensagem de saudação "Olá"
Existem n botões para alterar a cor na página da web, onde o retorno é a cor padrão da página da web, o plano de fundo é branco e a fonte é preta.
Clique em Botões diferentes, e a fonte e o plano de fundo da página da Web mudarão para cores diferentes.
Originalmente, eu queria melhorar o arco -íris, mas o princípio é exatamente o mesmo, então não escrevo mais botões.
2. Ideias básicas
A chave é fornecer IDs para tags corporais e fontes JS para que possam ser controladas em JS. Este exemplo fornece um aplicativo às funções JS.
3. Processo de produção
Apenas uma página simples simples, consulte os comentários para obter detalhes:
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "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 = gb2312" />
<title> JS Alterar a cor do fundo </ititure>
<!-Este parágrafo também pode ser separado em um arquivo JS, mas esse código é muito curto, então não há necessidade->
<script type = "text/javascript">
// Onload é equivalente ao construtor desta página da web e o Onunload é equivalente à função de disjunção desta página da Web
função load () {
alerta ("Olá!");
}
function UNLOLT () {
alerta ("adeus!");
}
função changeColor (bcolor, fcolor) {
// equivalente a alterar a cor da fonte para a fonte <span style = "cor: passou fcolor">
document.getElementById ("corpo"). style.background = bcolor;
document.getElementById ("ziti"). style.color = fcolor;
}
</script>
</head>
<!-A chave é fornecer um ID para toda a página da web e fontes de linha. O método getElementById () em JS pode controlar facilmente as coisas no CSS->
<corpo onLload = "load ()" OnUnload = "UNLOOLT ()" ID = "Body">
<span id = "ziti"> js </span>
<br />
<!-Observe que, ao passar os parâmetros em citações duplas, as citações duplas originais se tornarão citações únicas. O valor do OnClick é algo que será acionado assim que este botão for clicado->
<input onclick = "changeColor ('#ff0000', '#ffffff')" type = "botão"
value = "vermelho" />
<input onclick = "changeColor ('#ff9900', '#ffffff')" type = "botão"
value = "laranja" />
<input onclick = "changeColor ('#ffff00', '#000000')" tipo = "botão"
value = "amarelo" />
...
<input onclick = "changeColor ('#ffffff', '#000000')" tipo = "botão"
value = "return" />
</body>
</html>
A função OnUnload () é quase válida quando o IE fecha esta página, e essa caixa de diálogo não estará no front -end, e o Google Chrome não tem efeito. Portanto, essa função tem pouco significado.
Amigos interessados nas habilidades de operação de cores JS também podem se referir à ferramenta on -line:
Gerador de codificação de cores rgb
Ferramenta de correspondência de cor on -line na web
RGB COLORE COMERY COMPARON TABLE_COLOR CÓDIGO TABLE_COLOUR ENGONER
Espero que este artigo seja útil para a programação JavaScript de todos.