P: Estoy tratando de cambiar específicamente un div a un color elegido, y no todo el cuerpo a través de JS
Cuando uso JS para utilizar una entrada y cambiar el fondo según un color decidido por el usuario, la única línea de código que veo/puedo hacer funcionar es document.body.style.backgroundColor = color;
¿Hay alguna forma de hacer, por ejemplo, document.(classNameForADiv).style.backgroundColor = color; ? Soy muy nuevo en HTML, CSS y JS, por lo que agradecería cualquier consejo.
HTML:
<div class="cell text"> Background Color Picker: </div> <div class="cell js"> <input type="color" id="color_value" name="color_value" value="Black"> <!---DOUBLE (1 COLOR BOX 1 BUTTON)--> <button class="button two" type="button" onclick="changeBackground()"> Set Color: </button> </div>JS:
function changeBackground(){ let color = document.getElementById('color_value').value; document.body.style.backgroundColor = color; }Esto cambia el fondo de toda la etiqueta Body, mientras que estoy buscando una solución para cambiar el fondo de una etiqueta Div.
cambie el color de la etiqueta div solamente. (document.getElementById("myDiv").style.backgroundColor);
P: ¿Hay alguna forma de hacer document.(classNameForADiv).style.backgroundColor = color; ?
R: Sí, se llama querySelector y acepta un selector de CSS válido. Recuperará el primer elemento en una página que coincida con el selector:
document.querySelector('.my-class').style.backgroundColor = color;Puede usar document.querySelector(".my-class") para capturar el primer elemento que tiene my-class como clase. En tu caso así:
<div class="cell text"> Background Color Picker: </div> <div class="cell js"> <input type="color" id="color_value" name="color_value" value="Black"> <!---DOUBLE (1 COLOR BOX 1 BUTTON)--> <button class="button two" type="button" onclick="changeBackground()"> Set Color: </button> </div> <script> function changeBackground() { let color = document.getElementById("color_value").value; document.querySelector(".cell").style.backgroundColor = color; } </script>querySelector permite capturar elementos HTML con los mismos selectores que CSS, lo que puede ser muy útil. Si desea obtener más información al respecto, aquí hay un gran recurso .
Tienes que elegir una división específica para cambiar el color de la división.
function changeBackground(){ let color = document.getElementById('color_value').value; let division = document.getElementById("cell_text"); division.style.backgroundColor = color; } <div class="cell text" id = "cell_text"> Background Color Picker: </div> <br> <div class="cell js"> <input type="color" id="color_value" name="color_value" value="Black"> <!---DOUBLE (1 COLOR BOX 1 BUTTON)--> <button class="button two" type="button" onclick="changeBackground()"> Set Color: </button> </div>Por favor, compruebe Actualizado su código
function changeBackground(){ let color = document.getElementById('color_value').value; document.getElementById('color-box').style.backgroundColor = color; } <div class="cell text"> Background Color Picker: </div> <div class="cell js"> <input type="color" id="color_value" name="color_value" value="Black"> <!---DOUBLE (1 COLOR BOX 1 BUTTON)--> <button class="button two" type="button" onclick="changeBackground()"> Set Color: </button> </div> <div id="color-box"> THis is color box </div>Luego tienes que especificar el div de destino. Puse debajo de un div con salida de ID. Eso cambiaría el color solo en el div.
function changeBackground(){ let color = document.getElementById('color_value').value; document.getElementById('output').style.backgroundColor = color; } #output { height:200px; width:200px; } Background Color Picker: </div> <div class="cell js"> <input type="color" onchange="changeBackground()" id="color_value" name="color_value" value="Black"> <!---DOUBLE (1 COLOR BOX 1 BUTTON)--> <button class="button two" type="button" onclick=""> Set Color: </button> </div> <div id="output">traget DIV</div><div class="cell text"> Background Color Picker: </div> <div class="cell js" > <input type="color" id="color_value" name="color_value" value="Black"> <!---DOUBLE (1 COLOR BOX 1 BUTTON)--> <button class="button two" type="button" onclick="changeBackground()"> Set Color: </button> </div> <script> function changeBackground() { var color = document.getElementById("color_value").value; document.body.style.backgroundColor=color; } </script>