¿es posible? incrementar el color de un componente

[agirrearri]

Hola a todos,

quiero hacer una cosa que no se si es posible,

imaginense de que tengo este div

Código HTML:

<div id="midiv" style="background-color: #113422">este es mi div</div> 

lo que quiro hacer es que cuando pasa algun evento oscurecer el div de este modo

• color_del_div = color_del_div + 5;

teniendo jquery importado he probado esto pero no funciona.

Código HTML:

var color = $('#midiv').css('background-color');
$('#midiv').css('background-color', color + 5);

no se como si se podría hacer con less.

¿Se puede hacer algo así?

Gracias, un saludo.

[pzin]

Supongo que habrá en less, igual que hay en Sass, alguna función tipo darken() para oscurecer algún color.
Pero los lenguajes de preprocesado se compilan normalmente, así que si quieres hacerlo mediante CSS, pues tendrás que crear esa clase y añadirla mediante JavaScript en lugar de cambiar los estilos.

Algo así:

Código CSS:

#midiv {
  backround-color: #ff0000;
  &.oscuro {
    background-color: darken(#ff0000);
  }
}
 

Mejor hacerlo así con una función que ya tenga less a crear algo propio ya que oscurecer o aclarar un color es más complejo que un + 5.

[alzacon]

Tengo una duda con respecto a

color_del_div = color_del_div + 5;

¿Qué daría tu ejemplo con color #113422 al oscurecerlo con el +5?

[pzin]

Iniciado por alzacon

Tengo una duda con respecto a

¿Qué daría tu ejemplo con color #113422 al oscurecerlo con el +5?

Daría lo mismo que:

Código Javascript:

var = "hola" + 5;
 

[alzacon]

Iniciado por pzin

Daría lo mismo que:

Código Javascript:

var = "hola" + 5;
 

La respuesta ya la sabía, por eso no le funciona. Pero saber su respuesta ayuda a conocer porque ha querido plantear esa solución erronea a su "problema".

[IsraelPina]

Lo mejor como ya comentaban no es añadirle +5 al color, si no asignarle un color en hexadecimal (#ffffff), en este caso tu eliges el color lo que para ti es mas "oscuro", y modificas el css de la clase o id. Yo lo haria de la siguiente manera:

Jquery:

Código:

$('#midiv').tuevento(function(){
			$(this).css({"backgroud":"#6CA8F2"});
});

personalmente te aconsejaria buscar el color base y el color "oscurecido" y hacerlo asi de sencillo, estoy casi seguro que debe existir un metodo como mencionan pero si te urge trabaja con lo que sabes y lo que funciona.

te recomiendo ampliamente en todo tipo de codigo que hagas prueba y verifica que te lanza cada get (en su casa cada cosa que hagas) que utlizas para saber como modificarlo o usarlo, usa mucho el alert(caso jquery) por ejemplo en tu caso obtiene rgba 0,0,0,0 lo cual no es un numero para sumarle 5.

Saludos y espero haberte ayudado o encuentres pronto alguna solucion de tu gusto.