Tengo varios elementos html como body , div y nav cuyo color de fondo puede ser cambiado por el usuario globalmente.
Estos elementos se orientan mediante un class name específico.
La forma en que funciona es: Hay 3 botones para cambiar el color de fondo de cada uno de los 3 elementos. Cuando un usuario hace clic en un botón, se abrirá un modal que contiene todos los colores disponibles, en el que hay al menos 300 colores diferentes. Una vez que hacen clic en un hex value , todos los elementos con ese nombre de clase específico cambiarán de color.
Por favor, vea este ejemplo a continuación. Eliminé el modal por simplicidad y solo apunta a 1 nombre de clase: card-bg .
function changeBgColor(color){ var elements = document.getElementsByClassName("card-bg") for (var i = 0; i < elements.length; i++) { elements[i].style.background=color; } } <div class="card-bg"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi! </div> <br/> <div class="card-bg"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi! </div> <div style="background-color: #ffebee" class="text-dark"> <p>Red 50 <span><a onclick="changeBgColor('#FFEBEE');">#FFEBEE</a></span></p> </div> <div style="background-color: #ffcdd2" class="text-dark"> <p>100 <span><a onclick="changeBgColor('#FFCDD2');">#FFCDD2</a></span></p> </div> <div style="background-color: #ef9a9a" class="text-dark"> <p>200 <span><a onclick="changeBgColor('#EF9A9A');">#EF9A9A</a></span></p> </div> Esto funciona bien, pero me gustaría agregar algo más para mejorar su función, que es localStorage . Para que cuando los usuarios apaguen sus computadoras, puedan guardar su personalización.
Además, me gustaría tener un nuevo botón para restablecer estos colores a los valores predeterminados si el usuario así lo desea.
Me acabo de enterar y todavía estoy tratando de descifrar JavaScript en general... aunque me gustaría implementar esta función.
En su función de cambio de color, si se proporciona un color, configúrelo en almacenamiento local. Si no se proporciona, recupere el valor guardado en el almacenamiento local. Luego cambia el color de los elementos.
function changeBgColor(color){ // if provided color, set color to LS if (color) window.localStorage.setItem('bgColor', color); // if no provided color, check LS for color, and if no color in LS, fail silently else if (!(color = window.localStorage.getItem('bgColor'))) return; // update the page var elements = document.getElementsByClassName("card-bg") for (var i = 0; i < elements.length; i++) { elements[i].style.background=color; } }y en su función de carga, simplemente actualice la página llamando a la misma función con argumentos vacíos:
window.addEventListener('DOMContentLoaded', () => changeBgColor());Puede crear una variable que contenga el color y almacenarla en localStorage cuando sea conveniente, en lugar de almacenarla en localStorage cuando la configure también:
var bgcolor = "#000000" function changeBgColor(color) { bgcolor = color; // Whenever the color is changed, it's stored in bgcolor so that you can quickly set localStorage to it. var elements = document.getElementsByClassName("card-bg") for (var i = 0; i < elements.length; i++) { elements[i].style.background = color; } } function storeCurrentColor() { // Stores the current background color (which was stored in bgcolor) in localStorage window.localStorage.setItem("bgcolor", bgcolor); } function getCurrentColor() { // Gets the current background color and moves from localStorage into bgcolor. bgcolor = window.localStorage.getItem("bgcolor"); } function getAndSetCurrentColor() { // Gets the color from localStorage and sets the background color to it. getCurrentColor(); changeBgColor(bgcolor); }