Buscar este blog

viernes, 27 de septiembre de 2013

TRABAJAR CON JAVASCRIPT CON CSS

<!--COMO CAMBIAR UN CSS POR OTRO DISTINTO-->

<!DOCTYPE>
<html>
<head>
    <title>The best site ever</title>
    <link rel="stylesheet" href="css270913.css" id="css1" type="text/css" media=screen>
</head>

<body>
    <script>
    var mysection = document.createElement("section");
    mysection.id="PERRO";
    document.body.appendChild(mysection);
   
    var myheader = document.createElement("header");
    mysection.appendChild(myheader);
   
            var myH1 = document.createElement("h1");
            var textNode1 = document.createTextNode ("The best site ever");
            myH1.appendChild(textNode1);
            myheader.appendChild(myH1);
           
            var mydiv =document.createElement("div");
            mydiv.id="column1";
            var textNode2 = document.createTextNode ("just adding some content");
            mydiv.appendChild(textNode2);
            mysection.appendChild(mydiv);
           
                var myH2 = document.createElement("h2");
                var textNode3 = document.createTextNode ("well");
                myH2.appendChild(textNode3);
                mydiv.appendChild(myH2);
               
                    var myPe = document.createElement("p");
                    var textNode4 = document.createTextNode ("This was not so easy");
                    myPe.appendChild(textNode4);
                    myH2.appendChild(myPe);
       
        var mydiv2 =document.createElement("div");
        mydiv2.id="column2";
        mysection.appendChild(mydiv2);
       
        var mydiv3 =document.createElement("div");
        mydiv3.id="column3";
        mysection.appendChild(mydiv3);
       
        var divlimpiar=document.createElement("div");
        divlimpiar.id="limpiar";
        mysection.appendChild(divlimpiar);
       
        /*var aNode = document.body.children[1]
        var another = aNode.cloneNode(); //estamos clonando el Div entero
        document.body.appendChild(another);*/
       
        function changecss2() {
        document.getElementById('css1').href="css270913b.css";
        }
        function changecss1() {
        document.getElementById('css1').href="css270913.css";
        }
    </script>
    <button onclick="changecss2()">CHANGE TO CSS2!!</button>   
    <button onclick="changecss1()">CHANGE TO CSS1!!</button>   
       
</body>

</html>

css270913.css

#column1{
    width:200px;
    height:400px;
    float:left;
    background-color:#9a9;
}
#column2{
    width:200px;
    height:400px;   
    float:left;
    background-color:#a99;
}
#column3{
    width:200px;
    height:400px;
    float:left;
    background-color:#99a;
}
#limpiar{
    clear:both;

css270913b.css
#column1{
    width:100px;
    height:100px;
    float:left;
    background-color:#9a9;
}
#column2{
    width:200px;
    height:200px;   
    float:left;
    background-color:#a99;
}
#column3{
    width:400px;
    height:400px;
    float:left;
    background-color:#99a;
}
#limpiar{
    clear:both;

____________________________________________________________________




<!--COMO AGREGAR UN ESTILO CSS CON JAVASCRIPT-->

<!DOCTYPE>
<html>
<head>
    <title>The best site ever</title>
    <link rel="stylesheet" href="css270913.css" id="css1" type="text/css" media=screen>
</head>

<body>
    <script>
    var mysection = document.createElement("section");
    mysection.id="PERRO";
    document.body.appendChild(mysection);
   
    var myheader = document.createElement("header");
    mysection.appendChild(myheader);
   
            var myH1 = document.createElement("h1");
            var textNode1 = document.createTextNode ("The best site ever");
            myH1.appendChild(textNode1);
            myheader.appendChild(myH1);
           
            var mydiv =document.createElement("div");
            mydiv.id="column1";
            var textNode2 = document.createTextNode ("just adding some content");
            mydiv.appendChild(textNode2);
            mysection.appendChild(mydiv);
           
                var myH2 = document.createElement("h2");
                var textNode3 = document.createTextNode ("well");
                myH2.appendChild(textNode3);
                mydiv.appendChild(myH2);
               
                    var myPe = document.createElement("p");
                    var textNode4 = document.createTextNode ("This was not so easy");
                    myPe.appendChild(textNode4);
                    myH2.appendChild(myPe);
       
        var mydiv2 =document.createElement("div");
        mydiv2.id="column2";
        mysection.appendChild(mydiv2);
       
        var mydiv3 =document.createElement("div");
        mydiv3.id="column3";
        mysection.appendChild(mydiv3);
       
        var divlimpiar=document.createElement("div");
        divlimpiar.id="limpiar";
        mysection.appendChild(divlimpiar);
       
        /*var aNode = document.body.children[1]
        var another = aNode.cloneNode(); //estamos clonando el Div entero
        document.body.appendChild(another);*/
       
        function changecss2() {
        document.getElementById('css1').href="css270913b.css";
        }
       
        function changecss1() {
        document.getElementById('css1').href="css270913.css";
        }
        function addcss(css){
           
            var cssnuevo= document.createElement("link");
            cssnuevo.setAttribute("rel", "stylesheet");
            cssnuevo.setAttribute("type", "text/css");
            cssnuevo.setAttribute("href", css);
            document.head.appendChild(cssnuevo);
           
           
            }
    </script>
    <button onclick="changecss2()">CHANGE TO CSS2!!</button>   
    <button onclick="changecss1()">CHANGE TO CSS1!!</button>   
    <button onclick="addcss('cssii.css')">ADD CSS!!</button>       
</body>

</html>


cssii.css

*{
 
     background-color:#C8FE2E;
}
Publicado por en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)