Tengo un div lleno de color degradado lineal. Con un clic del botón, quiero invertir el color del degradado lineal. Lo logré nuevamente cambiando el valor del gradiente lineal. En lugar de cambiar el valor del degradado lineal, quiero saber si existe alguna propiedad CSS específica para revertir el degradado lineal. Espero que hayas entendido mi pregunta.
var color = document.getElementById('color'); var btn = document.getElementById('reverse'); reverse.onclick = reverseColor; function reverseColor(){ color.style.background = "linear-gradient(to right, rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)"; } .linear{ width:200px; height:30px; background: linear-gradient(to right, rgb(192,81 ,77) 0% ,rgb(192,81 ,77) 20%, rgb(203,110 ,106) 20% ,rgb(203,110 ,106) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(226,167 ,165) 60% ,rgb(226,167 ,165) 80%, rgb(237,195 ,194) 80% ,rgb(237,195 ,194) 100%); } <div id="color" class="linear"> </div> <button id="reverse" style="margin-top:50px"> Reverse Gradient </button>Simplemente puede alternar to right y to left en un degradado lineal.
Aquí está el código:
var color = document.getElementById('color'); var btn = document.getElementById('reverse'); myVar = "left"; function colorfn() { color.style.background = "linear-gradient(to " + myVar + ", rgb(237,195 ,194) 0% ,rgb(237,195 ,194) 20%, rgb(226,167 ,165) 20% ,rgb(226,167 ,165) 40%, rgb(215,138 ,136) 40% ,rgb(215,138 ,136) 60%, rgb(203,110 ,106) 60% ,rgb(203,110 ,106) 80%, rgb(192,81 ,77) 80% ,rgb(192,81 ,77) 100%)"; } btn.onclick = function() { myVar = myVar == "left" ? "right" : "left"; colorfn(); } colorfn(); .linear { width: 200px; height: 30px; } <div id="color" class="linear"> </div> <button id="reverse" style="margin-top:50px"> Reverse Gradient </button>Bueno, no hay exactamente una propiedad CSS específica para hacer eso además to right como lo hizo. Pero hay una forma ingeniosa de hacerlo en caso de que realmente lo necesites.
Así es como lo haría:
var color = document.getElementById('color'); var btn = document.getElementById('reverse'); reverse.onclick = reverseColor; var transformDeg = 0; function reverseColor() { if (transformDeg == 0) { transformDeg = 180; color.style.transform = "rotateY(" + transformDeg + "deg)"; } else { transformDeg = 0; color.style.transform = "rotateY(" + transformDeg + "deg)"; } }Aquí está la demostración de JSFiddle
También tenga en cuenta que hacerlo de esta manera también revertirá todos los contenidos. Así que esto puede ser apropiado o no dependiendo de lo que quieras lograr :)
Puedes agregar una clase.
var color = document.getElementById('color'); var btn = document.getElementById('reverse'); reverse.onclick = reverseColor; function reverseColor() { color.classList.toggle('reverse'); } .linear { width: 200px; height: 30px; background: linear-gradient(to right, rgb(192, 81, 77) 0%, rgb(192, 81, 77) 20%, rgb(203, 110, 106) 20%, rgb(203, 110, 106) 40%, rgb(215, 138, 136) 40%, rgb(215, 138, 136) 60%, rgb(226, 167, 165) 60%, rgb(226, 167, 165) 80%, rgb(237, 195, 194) 80%, rgb(237, 195, 194) 100%); } .reverse { background: linear-gradient(to right, rgb(237, 195, 194) 0%, rgb(237, 195, 194) 20%, rgb(226, 167, 165) 20%, rgb(226, 167, 165) 40%, rgb(215, 138, 136) 40%, rgb(215, 138, 136) 60%, rgb(203, 110, 106) 60%, rgb(203, 110, 106) 80%, rgb(192, 81, 77) 80%, rgb(192, 81, 77) 100%) } <div id="color" class="linear"> </div> <button id="reverse" style="margin-top:50px"> Reverse Gradient </button>