Llamar archivo CSS desde Javascript

Bigcrime · #1 (**permalink**) 25/04/2010, 16:05

Como puedo utilizar un ID de CSS dentro de Javascript.

Grax!

Bigcrime · #2 (**permalink**) 25/04/2010, 18:07

Alguien podria ayudarme!

Grax!

abimaelrc · #3 (**permalink**) 25/04/2010, 18:12

Acuerdate que esto es un foro, no un chat. Al menos espera 24 horas para volver a postear si no te han contestado. Para obtener el id de una etiqueta debes usar

Código Javascript:

Ver originaldocument.getElementById('aquiVaElId').style.color="#336699";

Más información getElementById

Bigcrime · #4 (**permalink**) 25/04/2010, 18:24

Lo siento

es que veo que responden a otros y a mi no, y lo mio es mas simple

.

lo que pregunto no es como utilizar estilos de CSS con javascript, sino utilizar un ID que tengo en un archivo CSS dentro del codigo javascript, no se si me entiendes

.

Grax por responder! muchas grax.

abimaelrc · #5 (**permalink**) 25/04/2010, 18:33

Sinceramente, no entiendo a lo que te refieres con sino utilizar un ID que tengo en un archivo CSS dentro del codigo javascript. Podrías postear algún ejemplo.

Bigcrime · #6 (**permalink**) 25/04/2010, 18:47

mira, he creado un ID en CSS (#diseño {...}) el cual esta en un archivo CSS que he llamado a mi pagina web. Entonces ese ID puedo llamarlo sin problemas al codigo HTML con
<div id="diseño">. Ahora bien lo que quiero es llamarlo pero no dentro de HTML sino dentro de javascript y no se como hacerlo, en lugar de usar getElementById para cada estilo (los cuales son demaciados) quisiera mejor simplemente llamarlo y luego crear la parte dinamica con javascript.

espero que ahora si

abimaelrc · #7 (**permalink**) 25/04/2010, 19:21

A ve si entendí, ¿tu quieres por medio de javascript crear el id y que se muestre en el navegador conforme a como tienes declarado tu css? Si es así, solo tienes que crear el elemento y luego asignarle el id. Algo así me refiero

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type="text/css">
#diseno{
    color: #ff0000;
}
</style>
<body>
<script type="text/javascript">
body = document.getElementsByTagName('body')[0];
div = document.createElement('div');
div.id='diseno';
div.innerHTML = 'información va aquí';
body.appendChild(div);
</script>
</body>
</html>

Bigcrime · #8 (**permalink**) 25/04/2010, 19:37

AFF tan malo soy explicando :D? de ahora en adelante ejemplificare con codigo

, perdoname por no hacerlo antes:

Código Javascript:

Ver original<html>
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="www.intercambiosvirtuales.org" />
 
    <title>Untitled 5</title>
    
    <link href="archivo.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<script>
 
function go()
{
 
/*Ahora quiero llamar a el ID (#diseño) que esta dentro de archivo.css aqui dentro*/
document.getElementById("cuadro");
/*algunos procesos...*/
 
}
</script>
 
<p id="cuadro"></p>
<input type="text" onfocus="go();"/> 
 
 
</body>
</html>

LLamo al ID diseño que esta dentro del archivo.css a javascript.
envio todo ese styling al ID "cuadro" que esta aplicado a la etiqueta <p>
y finalmente aplico la funcion go() a un campo(Los procesos determinaran que haces)

eso es lo que quiero hacer :D... grax por las respuestas!

abimaelrc · #9 (**permalink**) 25/04/2010, 20:01

Eso no es necesario hacerlo con javascript, lo puedes hacer de esta forma

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type="text/css">
input:focus{
    color: #ff0000;
}
</style>
<body>
<input type="text" name="texto" />
</body>
</html>

Bigcrime · #10 (**permalink**) 25/04/2010, 20:15

o,O no sabia eso

, pero quisiera llamarlo, porq tengo varios input con estilos distintos y no quiero que se apliquen esos estilos de no ser que la funcion de javascript lo indique, en ese ejemplo puse una funcion y un campo, pero tengo una funcion para cada campo y un ID CSS paca campo tambien.

Sinceramente que si existe alguna manera de llamar ese ID desde javascript ya solucionaria mi problema, no quiero poner todo ese codigo dentro de javascript, es realmente mucho.

Grax por la respueste

abimaelrc · #11 (**permalink**) 25/04/2010, 20:22

No es necesario, solo indica a que clase pertenece y listo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style type="text/css">
.input1:focus{
    color: #ff0000;
}
.input2:focus{
    color: #336699;
    font-weight: bold;
}
.input3:focus{
    color: #ffffff;
    background-color: #000000;
}
.input4:focus{
    color: #ffffff;
    background-color: #336699
}
</style>
<body>
<input type="text" name="texto" class="input1" />
<input type="text" name="texto" class="input2" />
<input type="text" name="texto" class="input3" />
<input type="text" name="texto" class="input4" />
</body>
</html>

Además, no creo que exista lo que estás pidiendo. Si lo quieres hacer con javascript, vas a tener que ingresar todo el código de CSS en el javascript.

Panino5001 · #12 (**permalink**) 25/04/2010, 21:04

Una manera de hacerlo sería esta:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<style>

#algo{background:#F00; font-size:16px; border:1px solid black;padding:5px}

</style>

<script>

function addCss(cssCode,i) {

    control=document.getElementById(i)

    if(control)

        document.getElementsByTagName("head")[0].removeChild(control)

    var styleElement = document.createElement("style");

    styleElement.type = "text/css";

    if (styleElement.styleSheet) {

        styleElement.styleSheet.cssText = cssCode;

    } else {

        styleElement.appendChild(document.createTextNode(cssCode))

    }

    styleElement.id =i;

    document.getElementsByTagName("head")[0].appendChild(styleElement);

} 

function cambiarA(selector,obj) {

  var miRegla = document.styleSheets[0].rules || document.styleSheets[0].cssRules

  for (var i=0; reg=miRegla[i]; i++){

    if (reg.selectorText.toLowerCase() == selector.toLowerCase() ){

        var pares= reg.cssText || reg.style.cssText;

        pares=pares.split('{').join('').split('}').join('').replace(reg.selectorText,'');

        var nombreclase='algo'+new Date().getTime();

        addCss('.'+nombreclase+'{'+pares+'}','uuu');

        obj.className=nombreclase;

    }

  }

}

</script>

 
</head>

 
<body>

<div onclick="cambiarA('#algo',this)">test </div>

</body>

</html>

abimaelrc · #13 (**permalink**) 25/04/2010, 21:09

Vez lo que te digo es más fácil con CSS,

Panino5001 · #14 (**permalink**) 25/04/2010, 21:13

Muy cierto!

abimaelrc · #15 (**permalink**) 25/04/2010, 21:17

En css puedes lograr el efecto que dije, pero para IE6 e IE7 no funciona. Para ello puedes usar lo que indicó Panino5001. Para IE8 para que funcione el código que te indique requiere del doctype.

Bigcrime · #16 (**permalink**) 25/04/2010, 21:19

Abi, el problema es que lo que estoy haciendo es una caja de texto que aparesca cuando entras al campo, cambie por otras dependiendo lo que escribesl, y desparesca cuando sales del campo habiendo escrito lo correcto y io creo que para eso debe ser con javascript mediante funciones, bueno es la unica forma que io me se no me se muchos trucos. Y tengo todas esas funciones ya hechas y funcionando correctamente solo me falta el cuadro CSS con esquinas redondeadas, que de la manera que lo se hacer lleva mucho code CSS

.

En cuando al code de Panino mañana en la mañana me pondre a analizarlo, vi algunos script que no conosco

! y ia es tarde aqui

mil gracias a ambos y que la pasen bien ^_^. Manana espero averlo resuelto sin tener que postear

, LoL no los culpo si lo dudan

!