Hola a todos, hace siglos que no posteaba pero estoy de vuelta. No se si es noob lo que estoy haciendo pero les puede servir de utilidad.
Antes de hacer esto debes tener jQuery en tu sitio web
¿les ha pasado que quieren aplicar un color a un div y a su vez quieren colorear de un color mas oscuro el borde? Aquí les tengo la solución
los primero que deben manejar es el uso de data-, una atributo HTML5 al cual puedes terminarlo con lo que quieras (siempre que sean letras), cabe decir que se puede poner en cualquier etiqueta de <body> por ejemplo:
<p data-color='FFEA78'>hola</p>
<div data-comentario='data- es facil'></div>
<h2 data-HolaKAse='K onda'>Ai Peleíta?</h2>
... etc.
Pero vamos al grano nosotros vamos a usar el atributo data-color, como dije puedes escibir lo que sea, pero para no complicarse, usaré ese.
escribamos algunos divs(aún no sirven, la magia viene después)
<div data-color='FF0000'>Hola</div>
<div data-color='559879'>Estoy </div>
<div data-color='676789'>Usando</div>
<div data-color='00FFAA'>Data color</div>
Ahora lo importante, validar todos los data-color al final de tu pagina web
<script>
//VALIDAR DATA-COLOR
(function(){
for(i=0;i<$('[data-color]').length;i++){
col=$('[data-color]')[ i ].getAttribute('data-color')
aplicar_color=col;
aplicar_borde=new Array();
aplicar_borde[0]=parseInt('0x'+col.charAt(0)+col.charAt(1));
aplicar_borde[1]=parseInt('0x'+col.charAt(2)+col.charAt(3));
aplicar_borde[2]=parseInt('0x'+col.charAt(4)+col.charAt(5));
for(j=0;j<aplicar_borde.length;j++){
aplicar_borde[j]=Math.round(aplicar_borde[j]*0.3);
aplicar_borde[j]=(aplicar_borde[j]).toString(16);
aplicar_borde[j]=(aplicar_borde[j].length==1) ? '0'+aplicar_borde[j] : aplicar_borde[j];
}
aplicar_borde_final=aplicar_borde[0]+aplicar_borde[1]+aplicar_borde[2];
$('[data-color]')[ i ].style['background-color']='#'+aplicar_color;
$('[data-color]')[ i ].style['border-color']='#'+aplicar_borde_final;
$('[data-color]')[ i ].style['border-style']='solid';
$('[data-color]')[ i ].style['border-width']='1px';
}
})();
</script>
Antes de hacer esto debes tener jQuery en tu sitio web
¿les ha pasado que quieren aplicar un color a un div y a su vez quieren colorear de un color mas oscuro el borde? Aquí les tengo la solución
los primero que deben manejar es el uso de data-, una atributo HTML5 al cual puedes terminarlo con lo que quieras (siempre que sean letras), cabe decir que se puede poner en cualquier etiqueta de <body> por ejemplo:
<p data-color='FFEA78'>hola</p>
<div data-comentario='data- es facil'></div>
<h2 data-HolaKAse='K onda'>Ai Peleíta?</h2>
... etc.
Pero vamos al grano nosotros vamos a usar el atributo data-color, como dije puedes escibir lo que sea, pero para no complicarse, usaré ese.
escribamos algunos divs(aún no sirven, la magia viene después)
<div data-color='FF0000'>Hola</div>
<div data-color='559879'>Estoy </div>
<div data-color='676789'>Usando</div>
<div data-color='00FFAA'>Data color</div>
Ahora lo importante, validar todos los data-color al final de tu pagina web
<script>
//VALIDAR DATA-COLOR
(function(){
for(i=0;i<$('[data-color]').length;i++){
col=$('[data-color]')[ i ].getAttribute('data-color')
aplicar_color=col;
aplicar_borde=new Array();
aplicar_borde[0]=parseInt('0x'+col.charAt(0)+col.charAt(1));
aplicar_borde[1]=parseInt('0x'+col.charAt(2)+col.charAt(3));
aplicar_borde[2]=parseInt('0x'+col.charAt(4)+col.charAt(5));
for(j=0;j<aplicar_borde.length;j++){
aplicar_borde[j]=Math.round(aplicar_borde[j]*0.3);
aplicar_borde[j]=(aplicar_borde[j]).toString(16);
aplicar_borde[j]=(aplicar_borde[j].length==1) ? '0'+aplicar_borde[j] : aplicar_borde[j];
}
aplicar_borde_final=aplicar_borde[0]+aplicar_borde[1]+aplicar_borde[2];
$('[data-color]')[ i ].style['background-color']='#'+aplicar_color;
$('[data-color]')[ i ].style['border-color']='#'+aplicar_borde_final;
$('[data-color]')[ i ].style['border-style']='solid';
$('[data-color]')[ i ].style['border-width']='1px';
}
})();
</script>