personalizado - como poner color a las letras en javascript
¿Cómo cambio el color de fondo con JavaScript? (16)
AJAX está obteniendo datos del servidor usando JavaScript y XML de manera asincrónica. ¡A menos que quiera descargar el código de color del servidor, eso no es lo que realmente está buscando!
De lo contrario, puede establecer el fondo CSS con Javascript. Si está usando un framework como jQuery, será algo como esto:
$(''body'').css(''background'', ''#ccc'');
De lo contrario, esto debería funcionar:
document.body.style.background = "#ccc";
¿Alguien conoce un método simple para cambiar el color de fondo de una página web usando JavaScript?
Agregue este elemento de script a su elemento de cuerpo, cambiando el color como desee:
<body>
<p>Hello, World!</p>
<script type="text/javascript">
document.body.style.backgroundColor = "#ff0000"; // red
</script>
</body>
Enfoque Css:
Si quieres ver el color continuo, utiliza este código:
body{
background-color:black;
animation: image 10s infinite alternate;
animation:image 10s infinite alternate;
animation:image 10s infinite alternate;
}
@keyframes image{
0%{
background-color:blue;
}
25%/{
background-color:red;
}
50%{
background-color:green;
}
75%{
background-color:pink;
}
100%{
background-color:yellow;
}
}
Si quieres verlo más rápido o más lento, cambia 10 segundos a 5 segundos, etc.
Esta es una codificación simple para cambiar el fondo usando javascript
<body onLoad="document.bgColor=''red''">
Esto cambiará el color de fondo de acuerdo con la elección del usuario seleccionado del menú desplegable:
function changeBG() {
var selectedBGColor = document.getElementById("bgchoice").value;
document.body.style.backgroundColor = selectedBGColor;
}
<select id="bgchoice" onchange="changeBG()">
<option></option>
<option value="red">Red</option>
<option value="ivory">Ivory</option>
<option value="pink">Pink</option>
</select>
Estoy de acuerdo con el cartel anterior que cambiar el color por className es un enfoque más bonito. Sin embargo, mi argumento es que un className puede considerarse como una definición de "por qué quieres que el fondo sea este o aquel color".
Por ejemplo, hacerlo rojo no es solo porque lo quiere rojo, sino porque desea informar a los usuarios de un error. Como tal, establecer la className AnErrorHasOccured en el cuerpo sería mi implementación preferida.
En css
body.AnErrorHasOccured
{
background: #f00;
}
En JavaScript:
document.body.className = "AnErrorHasOccured";
Esto te deja la opción de diseñar más elementos de acuerdo con este className . Y como tal, al establecer un className le da un cierto estado a la página.
No necesita AJAX para esto, solo una secuencia de comandos Java simple que establece la propiedad de color de fondo del elemento de cuerpo, como esta:
document.body.style.backgroundColor = "#AA0000";
Si desea hacerlo como si fuera iniciado por el servidor, debería sondear el servidor y luego cambiar el color en consecuencia.
Pero desearía configurar el color del cuerpo antes de que exista el elemento <body> . De esa manera tiene el color correcto desde el principio.
<script>
var myColor = "#AAAAAA";
document.write(''/
<style>/
body{/
background-color: ''+myColor+'';/
}/
</style>/
'');
</script>
Esto puede colocarlo en el <head> del documento o en su archivo js.
Aquí hay un buen color para jugar.
var myColor = ''#''+(Math.random()*0xFFFFFF<<0).toString(16);
Preferiría ver el uso de una clase css aquí. Evita tener colores / códigos hexadecimales difíciles de leer en javascript.
document.body.className = className;
Puedes cambiar el fondo de una página simplemente usando:
document.body.style.background = #000000; //I used black as color code
Sin embargo, la secuencia de comandos siguiente cambiará el fondo de la página cada 3 segundos con la función setTimeout ():
$(function() {
var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];
setInterval(function() {
var bodybgarrayno = Math.floor(Math.random() * colors.length);
var selectedcolor = colors[bodybgarrayno];
$("body").css("background",selectedcolor);
}, 3000);
})
Puedes cambiar el fondo de una página simplemente usando:
function changeBodyBg(color){
document.body.style.background = color;
}
Leer más @ Cambiar el color de fondo
Puedes hacerlo de las siguientes maneras PASO 1
var imageUrl= "URL OF THE IMAGE HERE";
var BackgroundColor="RED"; // what ever color you want
Para cambiar el fondo de BODY
document.body.style.backgroundImage=imageUrl //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color
Para cambiar un elemento con ID
document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor
para elementos con la misma clase
var elements = document.getElementsByClassName("ClassName")
for (var i = 0; i < elements.length; i++) {
elements[i].style.background=imageUrl;
}
Realmente no clasificaría esto como "AJAX". De todos modos, algo como seguir debería hacer el truco:
document.body.style.backgroundColor = ''pink'';
Sugeriría el siguiente código:
<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type=''text/javascript''>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor=''#800'';
element.style.color=''white'';
element.style.textAlign=''center'';
}
</script>
si desea utilizar un botón u otro evento, simplemente use esto en JS:
document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});
Modifique la propiedad de JavaScript document.body.style.background .
Por ejemplo:
function changeBackground(color) {
document.body.style.background = color;
}
<BODY onload="changeBackground(''red'');">
Nota: esto depende un poco de cómo se combina su página, por ejemplo, si está utilizando un contenedor DIV con un color de fondo diferente, necesitará modificar el color de fondo de ese documento en lugar del cuerpo del documento.