Este artículo describe el método JavaScript para cambiar el fondo y el color de fuente de la página web. Compártelo para su referencia. El análisis específico es el siguiente:
JavaScript, haciendo clic en el botón para cambiar el color del fondo y la fuente de la página web. Hay N botones para cambiar el color en la página web. Al hacer clic en diferentes botones, la fuente y el fondo de la página web cambiarán a diferentes colores. Applet de JavaScript muy simple.
1. Objetivos básicos
Tan pronto como abra la página web, primero solicitará el mensaje de saludo "hola"
Hay n botones para cambiar el color en la página web, donde la devolución es el color predeterminado de la página web, el fondo es blanco y la fuente es negra.
Haga clic en diferentes botones, y la fuente y el fondo de la página web cambiarán a diferentes colores.
Originalmente quería hacer una mejora del arco iris, pero el principio es exactamente el mismo, por lo que no escribiré más botones.
2. Ideas básicas
La clave es proporcionar IDS para etiquetas de cuerpo y fuentes JS para que puedan controlarse en JS. Este ejemplo proporciona una aplicación a las funciones JS.
3. Proceso de producción
Solo una página pequeña simple, consulte los comentarios para más detalles:
Copie el código de la siguiente manera: <! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> JS Cambiar color de fondo </title>
<!-Este párrafo también se puede separar en un archivo JS, pero este código es demasiado corto, por lo que no hay necesidad->
<script type = "text/javaScript">
// Onload es equivalente al constructor de esta página web, y OnUnload es equivalente a la función de disyunción de esta página web
función load () {
alerta ("¡Hola!");
}
function descarga () {
alerta ("¡Adiós!");
}
Función Changecolor (BColor, Fcolor) {
// equivalente a cambiar el color de la fuente para la fuente <span style = "color: pasada fcolor">
document.getElementById ("cuerpo"). style.background = bcolor;
document.getElementById ("ziti"). style.color = fcolor;
}
</script>
</ablo>
<!-La clave es proporcionar una identificación para toda la página web y fuentes de línea. El método GetElementById () en JS puede controlar fácilmente las cosas en CSS->
<Body Onload = "Load ()" OnUnload = "Descarga ()" id = "Body">
<span id = "ziti"> js </span>
<Br />
< El valor de OnClick es algo que se activará una vez que se haga clic en este botón->
<input onClick = "Changecolor ('#FF0000', '#ffffff')" type = "botón"
valor = "rojo" />
<input onClick = "Changecolor ('#FF9900', '#ffffff')" type = "botón"
valor = "naranja" />
<input onClick = "Changecolor ('#ffff00', '#000000')" type = "botón"
valor = "amarillo" />
...
<input onClick = "Changecolor ('#ffffff', '#000000')" type = "botón"
valor = "return" />
</body>
</html>
La función OnUnload () es casi válida cuando IE cierra esta página, y este cuadro de diálogo no estará en el frente, y Google Chrome no tiene ningún efecto. Por lo tanto, esta función tiene poca importancia.
Los amigos interesados en las habilidades de operación de color JS también pueden referirse a la herramienta en línea:
Generador de codificación de color RGB
Herramienta de coincidencia de color web en línea
Table de comparación de consultas de color RGB Table_color table_colour colección de nombres en inglés
Espero que este artículo sea útil para la programación de JavaScript de todos.