Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Cambiar .css con javascript .Ayuda por favor.

JavaScript - Cambiar .css con javascript .Ayuda por favor.

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 18/10/2015 18:40:56
Hola Amigos :

He estado leyendo como cambiar un archivo .css con javascrit .Y he encontrado como cambiarlo con el elemento "id" (byid) ..cuando la hora es == a ejemplo o al presionar un bòton .
Este material que encontre funciona perfectamente en html ...ahora mi proble ma surge por que estoy utilizando php (Joomla para ser màs especìfico).
Quisiera cambiar el .css "general.css" por "generalprueba.css" ...Alguien puede ayudarme por Favor ?

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" media="screen" />

Como puedo cambiar el contenido de la "href" con javascript? ...Muchas Gracias y Saludos cordiales
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 18/10/2015 20:06:25
Hola Gavriel, una vez cargada la página, aunque cambies el href del <link...> de css, no dejara de utilizar los CSS que ya ha cargado el navegador...

No se si cargando una nueva hoja de estilos una vez cargada la pagina, realizara el cambio el navegador... yo personalmente creo que no ara nada... si lo pruebas, ya nos comentaras.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 19/10/2015 02:35:06
Es verdad lo que dices amigo..ono habia tenido en cuenta que ya se carga el .css ..
Yo lo que estoy haciendo , o mejor dicho lo que quiero hacer que la pàgina se vuelva de noche a partir de las 22:00 hs ...
El cambio gradual de el color de fondo ya lo realize en .css por eso queria cambiar el .css a las 22:00 hs.
Tambièn estuve experimentando asì:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<body style="background:#337ab7;" <?php echo ('style="font-size:'.$fontSize.';"');?> class="<?php echo $general_background ; ?>">
<script>
function MostrarTiempoColor() {
	var d = new Date();
	var h = d.getHours();
	var m = d.getMinutes();
	//obligo el numero a ser representado en dos digitos
	if(h <= 9) h = '0'+h;
	if(m <= 9) m = '0'+m;
	// genero el color
	var color = "#777";
	//cambio el color de fondo
      if (h>=22 & m>=00)
	document.body.style.background = color;
//actualizo la funcion cada segundo
	setTimeout(MostrarTiempoColor, 1000);
}
MostrarTiempoColor();
</script>
Y si funciona..entonces lo que podrìa hacer es crear màs variables e ir cambiando el color del fondo en forma gradual....que opinan ?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 19/10/2015 09:00:50
Hola Gavriel, para lo que quieres hacer, simplemente añadiendo un estilo conseguiras tu efecto...

Revisa la instrucción de jquery addClass() y removeClass()

De esta sencilla manera, a una hora en concreto puedes añadir una clase a tu body, para que cambie complemente el diseño de tu página web.

Es esto lo que buscas?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 19/10/2015 20:02:38
Hola amigo xve:
disculpa pero no comprendo como me puede ayudar agregar un Class...
A mi me gustaria que mi pequeña red social fuera dinàmica...dinàmica en el sentido que si esta oscureciendo en la vida real, tambien oscurezca en la pàgina web y salgan de apoco estrellas y eso....
Un amigo me ayudo con las estrellas (3 imagenes q van cambiando) en css con keyframes :
1
2
3
4
5
6
7
@keyframes pulso {
from {
	opacity: 0.5;
}
to {
	opacity: 1;
}

pero para que funcione tendrìa que cambiar a las 21:00hs el .css (el css"modificado" va cambiando va cambiando la gama de color hasta llegar a un azul oscuro , eso ocurre a las 22:00 hs 10pm ) paralelamente a las 21:30 hs 9:30pm empiezan a aparecer las estrellas...
a las 7:00am 7:00hs ocurre el efecto ,pero a la inversa ,es decir se va aclarando el cielo y desaparecen las estrellas .
En Html funciona perfectamente pero cuando lo quice llevar a php ...ahi tuve problemas...
Como funcionaria , amigo, eso de agregar y eliminar class..es nuevo para mì... Gracias por la ayuda xve =)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 19/10/2015 21:07:01
ohhh ...amigo xve ya lei jquery addClass() y removeClass() ... y està muy interesante.
lo que tendrìa que hacer es agregarle la class "oscurecer" en el <body> a las 21:00hs ..por ejemplo y eso harà que tomè del .css el elemento .oscurecer (conde comienza a cambiar despacio el color del background)...seria algo asì o no...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 19/10/2015 21:09:48
Hola Gavriel, nos podrías mostrar el código html que funciona?

Lo que yo te comentaba de las clases css es... por ejemplo tu tienes defina estas dos clases de css:

1
2
.class1 {color:blue;}
.noche .class1 {color:black;}

y tienes un div con la clase class1 algo así:

1
2
3
<body>
<div class="class1">...</div>
</body>

Si desde javascript, añades al body al clase noche, automáticamente te cambiara el color de la clase class1

1
2
3
<body class="noche">
<div class="class1">...</div>
</body>

Para añadir dicha clase, con jquery es tan simple como:
1
2
3
<script>
$("body").addClass("noche");
</script>

Espero que me haya explicado... si tienes cualquier duda...


Me gustaria que adjuntaras el código en HTML que hace lo que quieres...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 20/10/2015 22:09:51
hola amigo xve :
el còdigo primario està en la primer pregunta que hice ...gracias a tus aporte y a los de un amigo en css el còdigo esta asì (falta terminar) ahì ya se produce el efecto oscurecimiento (esta acelerado x supuesto a 30 segundos para el test)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<script src="jquery-1.10.2.js"></script>
<body>
 
<script>
setInterval(check, 60 * 1000)
$(check)
 
function check() {
 
    var time = new Date;
    var hour = time.getHours();
 
    if (hour > 21) // 9 pm
    $("body").addClass("noche")
    else
    $("body").addClass("dia")
}
</script>
<style>
.noche{
    background: #73BBF0;
    animation: animacionColor 30s ;
	-o-animation: animacionColor 30s ;
    -ms-animation: animacionColor 30s ;
    -webkit-animation: animacionColor 30s ;
    -moz-animation: animacionColor 30s ;
}
@keyframes animacionColor{
    0% {background: #73BBF0;}
    10% {background: #60AAE1;}
    20% {background: #5BA5DD;}
    30% {background: #4F98CF;}
    40% {background: #418AC2;}
    50% {background: #3279B0;}
    60% {background: #24689C;}
    70% {background: #1C5A89;}
    80% {background: #11456C;}
    90% {background: #083557;}
    100% {background: #03223B;}
              }
@-webkit-keyframes animacionColor{
    0% {background: #73BBF0;}
    10% {background: #60AAE1;}
    20% {background: #5BA5DD;}
    30% {background: #4F98CF;}
    40% {background: #418AC2;}
    50% {background: #3279B0;}
    60% {background: #24689C;}
    70% {background: #1C5A89;}
    80% {background: #11456C;}
    90% {background: #083557;}
    100% {background: #03223B;}
              }
@-ms-keyframes animacionColor{
    0% {background: #73BBF0;}
    10% {background: #60AAE1;}
    20% {background: #5BA5DD;}
    30% {background: #4F98CF;}
    40% {background: #418AC2;}
    50% {background: #3279B0;}
    60% {background: #24689C;}
    70% {background: #1C5A89;}
    80% {background: #11456C;}
    90% {background: #083557;}
    100% {background: #03223B;}
}
@-o-keyframes animacionColor{
     0% {background: #73BBF0;}
    10% {background: #60AAE1;}
    20% {background: #5BA5DD;}
    30% {background: #4F98CF;}
    40% {background: #418AC2;}
    50% {background: #3279B0;}
    60% {background: #24689C;}
    70% {background: #1C5A89;}
    80% {background: #11456C;}
    90% {background: #083557;}
    100% {background: #03223B;}
}
@-moz-keyframes animacionColor{
     0% {background: #73BBF0;}
    10% {background: #60AAE1;}
    20% {background: #5BA5DD;}
    30% {background: #4F98CF;}
    40% {background: #418AC2;}
    50% {background: #3279B0;}
    60% {background: #24689C;}
    70% {background: #1C5A89;}
    80% {background: #11456C;}
    90% {background: #083557;}
    100% {background: #03223B;}
}
.dia {background:#73BBF0;}
</style>
</body>
</html>
Eso es lo que hay hasta ahora =)
pd: antes que me olvide en este año conocì muchas personas que me dieron una ayuda en la construccion de mi pequeña red social.... Habrà una pàgina especial "para mì" en la cual agregarè todas las Personas que colaboraron .Vos estas incluido en esa pàgina ...si quieres pasame tu web para ponerla junto a tu nombre y asì la gente , de paso, puede ver tu pàgina web ...esa es mi forma de agradecer.. =)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 21/10/2015 08:09:20
Hola Gavriel, gracias por tus comentarios, pero no dispongo de una pagina web... ya nos comentaras cuando la tengas activa!!!

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 22/10/2015 18:45:45
No importa xve si no tienes pàgina web ...queres que ponga "constribuciòn en la parte de javascript xve de lawebdelprogramador" ?
Hay muchas personas que hay colaborado desinteresadamente con migo y yo soy agradecido , como ya comente anteriormente habrà en mi querida red social una pàgina especial para los agradecimientos ,,, desde Jomla , los foros de Joomla hasta los aporte de emoticones...
Nadie colaborò con migo esperando ser reconocido...soy yo el que quiere reconocerlos...y de paso poner sus respectivos sitios web, para que las Personas de la red social tambièn sepan los proyectos que estan haciendo los que colaboraron con migo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 22/10/2015 19:51:39
Hola Gavriel, me parece parfecto lo que comentas... ya nos comentaras cuando lo publiques!!!

...a y si tienes cualquier duda... intentare ayudarte sin problema!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 23/10/2015 03:40:24
hola amigo xve:
Ya realize el anochecer (que pase de un celeste a un azul oscuro) y funciona perfecto y tambien el amanecer(que es la inversa del anterior).

Ahora me faltan colocar las estrellas,,,, supuse que utilizando el mismo mètodo anterior, lo iva a poder realizar .
Pero no me funciona .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.estrellas{
 
    background-color: #011E3C;
    background-image: url("estrellas3.png");
    animation: estrellasCielo 3s infinite;
    -o-animation: estrellasCielo 3s infinite;
    -ms-animation: estrellasCielo 3s infinite;
    -webkit-animation: estrellasCielo 3s infinite;
    -moz-animation: estrellasCielo 3s infinite;
}
@keyframes estrellasCielo
{
  0% {
    background-image: url('estrellas3.png');
  }
 
  50% {
    background-image: url('estrellas2.png');
  }
 
  100% {
    background-image: url('estrellas3.png');
  }
}
@-webkit-keyframes estrellasCielo
{
  0% {
    background-image: url('estrellas3.png');
  }
 
  50% {
    background-image: url('estrellas2.png');
  }
 
  100% {
    background-image: url('estrellas3.png');
  }
}
@-ms-keyframes estrellasCielo
{
  0% {
    background-image: url('estrellas3.png');
  }
 
  50% {
    background-image: url('estrellas2.png');
  }
 
  100% {
    background-image: url('estrellas3.png');
  }
}
@-o-keyframes estrellasCielo
{
  0% {
    background-image: url('estrellas3.png');
  }
 
  50% {
    background-image: url('estrellas2.png');
  }
 
  100% {
    background-image: url('estrellas3.png');
  }
}
hize esto pero no funca...sabes x que ?
son 3 imagenes de estrellas en diferentes posiciones...me gustaria que apareciera la 1 , luego que desapareciera esa y apareciera la 2 ..hasta llegar a la 3.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 28/11/2015 16:42:57
hola amigo xve
hay algo que no entiendo

como se utiliza la funciòn addClass cuando tenes varios "div" y sòlo queres modificar uno ...Por ejemplo "background-lunasol"
<div class="background-cielo"></div>
<div class="background-estrella01"></div>
<div class="background-estrellas"></div>
<div class="background-estrella03"></div>
<div class="background-lunasol"></div>
<div class="background-site"></div>
Gracias x la ayuda :D
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 28/11/2015 21:28:03
Faltaria ver donde se encuentras esos <div>, si estan dentro de algun otro elemento... por ejemplo supongamos esto:
1
2
3
4
5
6
7
8
<div id="grupo">
	<div class="background-cielo"></div>
	<div class="background-estrella01"></div>
	<div class="background-estrellas"></div>
	<div class="background-estrella03"></div>
	<div class="background-lunasol"></div>
	<div class="background-site"></div>
</div>

podrias acceder al de lunasol con:
1
$("#grupo>div:nth-child()").addClass("mi clase");

Esto te sirve?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 29/11/2015 00:35:17
Muchas gracias amigo xve por responder...ahora lo pruebo y comento .
Ya tengo el dominio , el hosting y la red social casi lista :D en 2 semanas subire el link (hay un apartado de agradecimiento , en el que estàs incluido como miembro de la web del programador) :D
cuando este lista pondrè el link (no para hacerme propaganda) sòlo por unos dìas para que vean la red social :D y todo lo que se puede hacer el equipo :D Gracias xve saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 29/11/2015 09:59:01
Hola Gavriel, ya tengo ganas de ver esta red social en funcionamiento... cuando la tangas publicada coméntame, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 30/11/2015 17:00:07
Hola amigo xve ..Yo tambièn estoy muy ansioso sòlo me falta hacer los gràficos con blender y la traslaciòn de la Luna y el Sol..Luego la subirè en etapa de prueba x 2 semanas ...ahì voy a necesitar mucho de tu experiencia...para q testes el funcionamiento ... ahì te mando 2 imagenes una de la Red de Dìa y otra de Noche ...en la parte derecha veràs unas de mis partes favoritas "los agradecimientos" x toda la ayuda que recibi
Saludos amigo y preparate para darme tu opiniòn y hacer un test full de la Red...
te mando las fotos en el zip son 2
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por xve (2100 intervenciones) el 30/11/2015 22:25:59
Tiene muy buena pinta!!!

Ya nos dirás cuando la podamos visualizar!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Gavriel
Val: 4
Ha aumentado su posición en 28 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar .css con javascript .Ayuda por favor.

Publicado por Gavriel (21 intervenciones) el 30/11/2015 23:19:44
Gracias amigo ... lo antes que pueda ...se me estaba ocurriendo que la podrìa subir el Mièrcoles (sin los gràficos 3d de blender...xq eso me llevarà toda una semana)...subirla antes para ir biendo su funcionamiento y testearla...recuerda que la he construido en localhost y con 1 o 2 usuarios de prueba ...asì que me parece q la voy a subir el miercoles para testearla con varios usuarios (todos amigos) para adelantar tiempo..
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar