84
¿Cómo puedo establecer el color de fondo CSS de un elemento HTML usando JavaScript?Color de fondo CSS en JavaScript
A
Respuesta
130
En general, las propiedades CSS se convierten en JavaScript, haciéndolos camelCase sin ningún guión. Entonces, background-color se convierte en backgroundColor.
function setColor(element, color)
{
element.style.backgroundColor = color;
}
20
var element = document.getElementById('element'); element.style.background = '#FF00AA';
19
O, usando un poco de jQuery:
$('#fieldID').css('background-color', '#FF6600');
+0
¿Los votos abajo porque hice referencia a jQuery? sólo curiosidad –
+0
Lo más probable es que, como OP ha pedido Javascript;) – Lodder
27
Usted puede encontrar su código es más fácil de mantener si se mantiene todos sus estilos, etc., en CSS y acaba de establecer nombres/clase no se ha establecido en JavaScript.
Su CSS, obviamente, sería algo así como:
.highlight {
background:#ff00aa;
}
Luego, en JavaScript:
element.className = element.className === 'highlight' ? '' : 'highlight';
+0
ermm sí Javascript, pero ¿dónde lo pones ?? !!! no lo suficientemente claro – Led
+2
Diría que es obvio dónde colocarlo, en cualquier lugar después del HTML que quiera cambiar. – TeeJay
+1
Esto es válido en la mayoría de los casos, pero no en los casos en que el color (o cualquier atributo) se define en la configuración o el usuario ingresa, no puede crear una clase CSS para cada color posible;) –
6
Añadir este elemento de secuencia de comandos para el elemento del cuerpo:
<body>
<script type="text/javascript">
document.body.style.backgroundColor = "#AAAAAA";
</script>
</body>
2
BESO Respuesta:
document.getElementById('element').style.background = '#DD00DD';
+0
¿cómo podemos hacerlo para ¿clase? –
+0
Para la clase 'document.getElementByClass ('element'). Style.background = '# DD00DD';' –
2
Se puede utilizar:
<script type="text/javascript">
Window.body.style.backgroundColor = "#5a5a5a";
</script>
2
Usted puede hacerlo con jQuery:
$(".class").css("background","yellow");
1
puede utilizar
$('#elementID').css('background-color', '#C0C0C0');
+0
esto es jquery no javascript –
+0
@vignesh jQuery * es * JavaScript -__- – Novocaine
+0
@Novocaine jQuery está escrito usando JavaScript, sí . pero todavía $ no va a funcionar a menos que incluya esa biblioteca jQuery;) –
5
var element = document.getElementById('element');
element.onclick = function() {
element.classList.add('backGroundColor');
setTimeout(function() {
element.classList.remove('backGroundColor');
}, 2000);
};.backGroundColor {
background-color: green;
}<div id="element">Click Me</div>
3
Puede probar este
var element = document.getElementById('element_id');
element.style.backgroundColor = "color or color_code";
Ejemplo.
var element = document.getElementById('firstname');
element.style.backgroundColor = "green";//Or #ff55ff
+1
'element.style.background-color' no es JavaScript válido. Es por eso que las propiedades de CSS se convierten a CamelCase. – CrazyIvan1974
+0
¡Oh, sí, tienes razón ...! Gracias @ CrazyIvan1974 –
-1
$(".class")[0].style.background = "blue";
+0
Hay más que suficientes respuestas correctas a esta pregunta, y esta respuesta no ofrece nada mejor que otras respuestas. – Novocaine
+0
Como Novocaine dijo que hay muchas respuestas aquí. Pero en el futuro, considere editar su publicación para agregar más explicaciones sobre lo que hace su código y por qué resolverá el problema. Una respuesta que solo contenga código (incluso si funciona) generalmente no ayudará al OP a entender su problema. – SuperBiasedMan
0
$("body").css("background","green"); //jQuery
document.body.style.backgroundColor = "green"; //javascript
tantas formas hay que creo que es muy fácil y simple
2
$('#ID/.Class').css('background-color', '#FF6600');
Mediante el uso de jQuery podemos ta rget la clase del elemento o Id aplicar fondo CSS o cualquier otro estilos de
-1
javascript:
document.getElementById("ID").style.background = "colorName"; //JS ID
document.getElementsByClassName("ClassName")[0].style.background = "colorName"; //JS Class
Jquery:
$('#ID/.className').css("background","colorName") // One style
$('#ID/.className').css({"background":"colorName","color":"colorname"}); //Multiple style
Cuestiones relacionadas
- 1. CSS "desbordamiento" elimina el "color de fondo"
- 2. javascript establecer elemento color de fondo
- 3. Color de fondo de CSS transparente
- 4. de fondo de color hexadecimal a la variable de JavaScript
- 5. Insecto de IE CSS: color de fondo: transparente se comporta de manera diferente al color de fondo: (cualquier otro color)
- 6. CSS RGBA el color de fondo de validación
- 7. CSS: color de fondo solo dentro del margen
- 8. CSS validación fondo degradado
- 9. Jquery cambia color de fondo
- 10. Poner Javascript en CSS
- 11. Ajuste color de fondo en Extjs Textfield
- 12. Transición del color de fondo
- 13. color de fondo en OpenGL
- 14. ¿Cómo hacer un fondo usando gradiente CSS con color plano?
- 15. navigationbar (color de fondo)
- 16. Color de fondo UIWebView
- 17. Fondo de desplazamiento lento en Javascript o CSS?
- 18. NSImageView + Color de fondo
- 19. css dos imágenes de fondo
- 20. ¿Separación de color de fondo y opacidad?
- 21. Color de fondo de la fila seleccionada
- 22. ¿Cómo cambio el color de fondo con JavaScript?
- 23. Ayuda de JQuery: color de fondo animado
- 24. color de fondo degradado e imagen de fondo DRYly
- 25. gradientes de fondo en IE7 con CSS
- 26. css: hover error de color
- 27. Generar color más claro/más oscuro en css usando javascript
- 28. Repetición de degradado de fondo CSS Problema
- 29. cambio de color de fondo
- 30. Establecer color de fondo de formulario en el color personalizado
me gustaría añadir el color, obviamente, es necesario que haya en el elemento de cotizaciones .style.backgroundColor = "color"; por ejemplo - element.style.backgroundColor = "orange"; excelente respuesta – Catto