Dúvida javacript: Pq meu código não funciona no Chrome, Opera,

Front-end
#1

Boa noite pessoal!
Antes de tudo gostaria de agradecer a paciência e colaboração, respostas
Não estou conseguindo entender por que meu código que encontra-se em:
http://presenteperfeito.99k.org/blog/js/DOM/tjs.html
O html do código para selecionar e colar:
http://presenteperfeito.99k.org/blog/js/DOM/tjs_html.html

Por que esse código funcionar no mozilla firefox versões superiores a 5.0 e não no google chrome, opera, konqueror (no ie e no safari não testei, aliás só testei nesses e no ubuntu 10.04) ?
Até no seamonkey funciona:
http://www.seamonkey-project.org/start/
Estou fazendo algo de errado ?
Explicando por cima o que esse código faz, para tirar o medo de algum script malicioso…
Esse código monta 3 divs via DOM e troca as bordas direita e esquerda da div do meio ( idid1) conforme seleciona-se os options de cores de um select criado por DOM em uma div logo abaixo da idid1, a saber a idid2
O que está acontecendo, que não troca as cores dos options e das bordas no chrome, opera, konqueror, ie e safari ?
Alguma sugestão ?
Quebrei a cabeça, mas está difícil achar o porquê.
Estou estudando DOM ainda … !

Grato Danilo

[code]

/* danilomatias19@gmail.com Esse código mostra apenas algumas propriedades dos navegadores, monta o html dentro do
todo via DOM, é importante salientar que funciona somente no mozilla firefox versões superiores a 5.0, a função isie() é uma função apenas para identificar 6 navegadores ela retorna de 1 até 6 
  */
            var ie=0;//variável global que possuirá o código do navegador que está sendo utilizado, para não terque ficar chamndo a função isie() toda hora                 
            //função para saber se é o internet exploer, chrome, firefox, opera, ou safari
            //retorno das funções de acordo com o navegador
            // 1 - ie
            //2 - firefox
            // 3 - chrome
            //4 - opera
            //5 - safari
            //6 konqueror
            function isie(){
                    if((navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1) && (navigator.userAgent.toLowerCase().indexOf("firefox") == -1)&& (navigator.userAgent.toLowerCase().indexOf("chrome") == -1)  && (navigator.userAgent.toLowerCase().indexOf("safari") == -1))
                    {                               
                            return 1 ;
                            //internet explorer  ie
                    }
                    if((navigator.userAgent.toLowerCase().indexOf("msie") == -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1) && (navigator.userAgent.toLowerCase().indexOf("firefox") != -1)&& (navigator.userAgent.toLowerCase().indexOf("chrome") == -1) && (navigator.userAgent.toLowerCase().indexOf("safari") == -1) )
                    {                       
                            return 2 ;
                            // mozilla firefox
                    }
                    if((navigator.userAgent.toLowerCase().indexOf("msie") == -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1) && (navigator.userAgent.toLowerCase().indexOf("firefox") == -1)&& (navigator.userAgent.toLowerCase().indexOf("chrome") != -1) && (navigator.userAgent.toLowerCase().indexOf("safari") != -1) )
                    {                       
                            return 3 ;
                            //chrome
                    }
                    if((navigator.userAgent.toLowerCase().indexOf("msie") == -1) && (navigator.userAgent.toLowerCase().indexOf("opera") != -1) && (navigator.userAgent.toLowerCase().indexOf("firefox") == -1)&& (navigator.userAgent.toLowerCase().indexOf("chrome") == -1)  && (navigator.userAgent.toLowerCase().indexOf("safari") == -1))
                    {                               
                            return 4 ;
                            // opera
                    }
                    if((navigator.userAgent.toLowerCase().indexOf("msie") == -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1) && (navigator.userAgent.toLowerCase().indexOf("firefox") == -1)&& (navigator.userAgent.toLowerCase().indexOf("chrome") == -1) && (navigator.userAgent.toLowerCase().indexOf("safari") != -1) )
                    {                               
                            return 5 ;
                            //safari
                    }
                    if((navigator.userAgent.toLowerCase().indexOf("msie") == -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1) && (navigator.userAgent.toLowerCase().indexOf("firefox") == -1)&& (navigator.userAgent.toLowerCase().indexOf("chrome") == -1) && (navigator.appVersion.toLowerCase().indexOf("konqueror") != -1) )
                    {                               
                            return 6 ;
                            //konqueror
                    }  
                    else
                            return 0;
            }      
            ie=isie();
            function addEvent1(obj, evType, fn){
                            if (obj.addEventListener)
                                    obj.addEventListener(evType, fn, true);
                            if (obj.attachEvent)
                                    obj.attachEvent("on" + evType, fn);
                    }
            //aqui pego o div de id1 via DOM através de getElementById()
     var id1=document.getElementById('id1');
    //aqui crio uma div via DOM
     var idid1=document.createElement("div");
    //aqui faço id="idid1", ou seja dou o id dessa div
       idid1.setAttribute('id','idid1');
      //aqui crio um texto que colocarei na minha div idid1
    var str = document.createTextNode('navigator.UserAgent: '+navigator.UserAgent);
    //      aqui coloco o texto na div idid1
     idid1.appendChild(str);
            //aqui crio uma quebra de linha(<br/>) e coloco na div idid1
      idid1.appendChild(document.createElement("br"));
      //aqui crio um texto e coloco na div idid1  mostrarei o valor da propriedade navigator.platform
        idid1.appendChild( document.createTextNode('navigator.platform: '+navigator.platform));
        idid1.appendChild(document.createElement("br"));
        idid1.appendChild( document.createTextNode('navigator.cookieEnabled: '+navigator.cookieEnabled));
       idid1.appendChild(document.createElement("br"));
        idid1.appendChild( document.createTextNode('navigator.javaEnabled(): '+navigator.javaEnabled()));
        idid1.appendChild(document.createElement("br"));
        idid1.appendChild( document.createTextNode('navigator.appVersion: '+navigator.appVersion));
        idid1.appendChild(document.createElement("br"));
        idid1.appendChild( document.createTextNode('navigator.appName: '+navigator.appName));
         idid1.appendChild(document.createElement("br"));
        idid1.appendChild( document.createTextNode('navigator.appCodeName: '+navigator.appCodeName));
        
         idid1.appendChild(document.createElement("br"));
        idid1.appendChild( document.createTextNode('navigator.appCodeName: '+navigator.appCodeName));     
            //um exemplo básico de try catch javascript
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('screen.pixelDepth: '+screen.pixelDepth));          
                    }catch(e2){
                            idid1.appendChild(document.createElement("br"));
                            //mostro a mensagem que a excessão, que eu chamei de e2, gerou (e2.message)
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade screen.pixelDepth '+e2.message));                                
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('screen.width: '+screen.width));            
                    }catch(e3){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade screen.width '+e3.message));                                     
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('screen.height: '+screen.height));          
                    }catch(e4){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade screen.height '+e4.message));                                    
                    }       
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('screen.colorDepth: '+screen.colorDepth));          
                    }catch(e5){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade screen.colorDepth '+e5.message));                                
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('screen.availWidth: '+screen.availWidth));          
                    }catch(e6){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade screen.availWidth '+e6.message));                                
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('screen.availHeight: '+screen.availHeight));        
                    }catch(e7){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade screen.availHeight '+e7.message));                                       
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.screenX: '+window.screenX));        
                    }catch(e8){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.screenX '+e8.message));                                   
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.screenY: '+window.screenY));        
                    }catch(e9){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.screenY '+e9.message));                                   
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.screenLeft: '+window.screenLeft));          
                    }catch(e10){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.screenLeft '+e10.message));                                       
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.screenTop: '+window.screenTop));            
                    }catch(e11){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.screenTop '+e11.message));                                
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.pageXOffset: '+window.pageXOffset));        
                    }catch(e12){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.pageXOffset '+e12.message));                                      
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.pageYOffset: '+window.pageYOffset));        
                    }catch(e13){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.pageYOffset '+e13.message));                                      
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.outerWidth: '+window.outerWidth));          
                    }catch(e14){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.outerWidth '+e14.message));                                       
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.outerHeight: '+window.outerHeight));        
                    }catch(e15){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.outerHeight '+e15.message));                                      
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.location.href: '+window.location.href));            
                    }catch(e16){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.location.href '+e16.message));                                    
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.length: '+window.length));          
                    }catch(e17){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.length '+e17.message));                                   
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.innerWidth: '+window.innerWidth));          
                    }catch(e18){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.innerWidth '+e18.message));                                       
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.innerHeight: '+window.innerHeight));        
                    }catch(e19){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.innerHeight '+e19.message));                                      
                    }
                    try{
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('window.name: '+window.name));              
                    }catch(e20){
                            idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode(' Nao existe a propriedade window.name '+e20.message));                                     
                    }
                    idid1.appendChild(document.createElement("br"));
                            idid1.appendChild( document.createTextNode('ie='+ie)); 
                            idid1.appendChild(document.createElement("br"));
                            if(ie===1)
                                    idid1.appendChild( document.createTextNode('internet explorer'));
                            else if(ie===2)
                                    idid1.appendChild( document.createTextNode('mozilla firefox'));
                            else if(ie===3)
                                    idid1.appendChild( document.createTextNode('google chrome'));
                            else if(ie===4)
                                    idid1.appendChild( document.createTextNode('opera'));
                            else if(ie===5)
                                    idid1.appendChild( document.createTextNode('safari'));
                            else if(ie===6)
                                    idid1.appendChild( document.createTextNode('konqueror'));
                            else
                                    idid1.appendChild( document.createTextNode('outro navegador'));
            //coloco a cor de fundo através de css no javascript    backgroundColor="#FFF5EE" é equivalente a backgroundColor: "#FFF5EE"           
            idid1.style.backgroundColor="#FFF5EE";              
            //colocando a borda de baixo com 2 pontos via css no javascript
            idid1.style.borderBottom="2px solid";
            //colocando a borda de baixo vermelha
            idid1.style.borderBottomColor="#FF0000";
            //colocando a borda de cima com 4 pontos via css no javascript
            idid1.style.borderTop="4px solid";
            //colocando a borda de baixo laranja
            idid1.style.borderTopColor="#FFA500";
            //abaixo é tudo manipulação de css
            idid1.style.borderLeft="5px solid";            
            idid1.style.borderLeftColor="#FFDEAD";
            idid1.style.borderRight="7px solid";           
            idid1.style.borderRightColor="#8B4513";         
                    var ididt=document.createElement("div");       
                    ididt.setAttribute('id','ididt');                      
                    ididt.style.backgroundColor="#F0FFFF";
                    ididt.style.borderBottom="5px solid";   
                    ididt.style.borderBottomColor="#000000";       
                    ididt.style.borderTop="5px solid";             
                    ididt.style.borderTopColor="#000000";
                    ididt.style.borderLeft="5px solid";            
                    ididt.style.borderLeftColor="#000000";
                    ididt.style.borderRight="5px solid";           
                    ididt.style.borderRightColor="#000000";   
                    ididt.style.textAlign="center";
                    ididt.style.fontWeight="bolder";
                    ididt.style.fontSize="x-large";
                    ididt.style.fontFamily="Comic Sans MS, Times New Roman, Charcoal,sans-serif";
                    ididt.style.display="block";
                    //colocando o título da página, pelo menos o que estará destacado, coloco de uma maneira mais direta
                    ididt.appendChild(document.createTextNode('Exemplo simples de manipulacao DOM e css via javascript'));
                    //aqui coloco a div de titulo ididt dentro da div id1
            id1.appendChild(ididt);  
                    idid1.style.fontSize="small";
      id1.appendChild(idid1);   
            var idid2=document.createElement("div");       
                    idid2.setAttribute('id','idid2');
                    //aqui crio via dom o <select id="idslct1">
                    var slct1 = document.createElement("select");
                    slct1.setAttribute('id','idslct1');
                    //crio via DOM o <option> que estará dentro do select
                    var opt2 = document.createElement("option");                           
                            opt2.text="Preto";
                            opt2.setAttribute('id','idopt2');
                           
                            //esses eventos de teclado nem uso, só coloquei para saber que eles existem
                            opt2.addEventListener("keydown", function() { opt2.style.backgroundColor="black"; opt2.style.color="white"; idid1.style.borderRightColor="black";  idid1.style.borderLeftColor= "black";   /*alert("opt2 - keydown"); */}, true);                              
                            opt2.addEventListener("keypress", function() { opt2.style.backgroundColor="black"; opt2.style.color="white"; idid1.style.borderRightColor="black";  idid1.style.borderLeftColor= "black";   /*alert("opt2 - keypress"); */}, true);                            
                            opt2.addEventListener("keyup", function() { opt2.style.backgroundColor="black"; opt2.style.color="white"; idid1.style.borderRightColor="black";  idid1.style.borderLeftColor= "black";   /*alert("opt2 - keyup"); */}, true);
                            var opt1 = document.createElement("option");                           
                                    opt1.text="Azul";
                                    opt1.setAttribute('id','idopt1');                                                              
                                   
                                   
                            var opt3 = document.createElement("option");                           
                                    opt3.text="Verde";
                                    opt3.setAttribute('id','idopt3');                                                      
                                   
                            var opt4 = document.createElement("option");                           
                                    opt4.text="Cinza";
                                    opt4.setAttribute('id','idopt4');                      
                                   
                            var opt5 = document.createElement("option");                           
                                    opt5.text="Laranja";
                                    opt5.setAttribute('id','idopt5');                                                              
                            slct1.add(opt5,null);                 
                            slct1.add(opt4,opt5);                         
                            slct1.add(opt3,opt4);                         
                            slct1.add(opt2,opt3);                         
                             slct1.add(opt1,opt2);
                             idid2.appendChild(document.createTextNode('Cores da borda direita e esquerda da div acima'));
                              idid2.appendChild(document.createElement("br"));
                             idid2.appendChild(slct1);                            
                    id1.appendChild(idid2);         
                    addEvent1(opt1, "mouseover", function() {opt1.style.backgroundColor="blue"; opt1.style.color="yellow";  idid1.style.borderRightColor="blue"; idid1.style.borderLeftColor= "blue";});
                    opt1.addEventListener("keydown", function() { opt1.style.backgroundColor="blue"; opt1.style.color="yellow"; idid1.style.borderRightColor="blue"; idid1.style.borderLeftColor= "blue";   /*alert("opt1 - keydown"); */}, true);                         
                    opt1.addEventListener("keypress", function() { opt1.style.backgroundColor="blue"; opt1.style.color="yellow"; idid1.style.borderRightColor="blue"; idid1.style.borderLeftColor= "blue";    /*alert("opt1 - keypress"); */}, true);                              
                    opt1.addEventListener("keyup", function() { opt1.style.backgroundColor="blue"; opt1.style.color="yellow"; idid1.style.borderRightColor="blue";  idid1.style.borderLeftColor= "blue";   /*alert("opt1 - keyup"); */}, true);
                    //como adicionar evento ao objeto opt2, nesse caso mouseover, eu troco a cor do option  opt2.style.backgroundColor="black"; e as cores da borda direita e esquerda                             
                            addEvent1(opt2, "mouseover", function() { opt2.style.backgroundColor="black"; opt2.style.color="white"; idid1.style.borderRightColor="black"; idid1.style.borderLeftColor= "black"; });
                            opt3.addEventListener("mouseover", function() { opt3.style.backgroundColor="green"; opt1.style.color="yellow";  idid1.style.borderRightColor="green"; idid1.style.borderLeftColor= "green"; }, true);                          
                            opt3.addEventListener("keydown", function() { opt3.style.backgroundColor="green"; opt1.style.color="yellow"; idid1.style.borderRightColor="green"; idid1.style.borderLeftColor= "green";  }, true);                            
                            opt3.addEventListener("keypress", function() { opt3.style.backgroundColor="green"; opt1.style.color="yellow"; idid1.style.borderRightColor="green"; idid1.style.borderLeftColor= "green";   }, true);                          
                            opt3.addEventListener("keyup", function() { opt3.style.backgroundColor="green"; opt1.style.color="yellow"; idid1.style.borderRightColor="green";  idid1.style.borderLeftColor= "green";  }, true);
                            opt4.addEventListener("mouseover", function() { opt4.style.backgroundColor="#C0C0C0"; opt1.style.color="yellow";  idid1.style.borderRightColor="#C0C0C0"; idid1.style.borderLeftColor= "#C0C0C0"; }, true);                            
                                    try{
                                            opt5.addEventListener("mouseover", function() { opt5.style.backgroundColor="#FF7F00"; opt1.style.color="yellow";  idid1.style.borderRightColor="#FF7F00"; idid1.style.borderLeftColor= "#FF7F00"; }, true);                                                                    
                                        }catch(e21){
                                            id1.appendChild(document.createTextNode('opa problema no opt5.addEventListener( ...) '+e21.message));  
                                        } 
                                      
    </script>
[/code]
#2

Resolvi simplificar, pois parece que eventos em option são suportados apenas no Mozilla, e os eventos funcionaram perfeitamente, só que na tag select

[code]

Exemplo simples de manipulacao DOM .titulo{ background-color:#F0FFFF; border-bottom: 5px solid; border-bottom-color: #000000; border-top: 5px solid; border-top-color: #000000; border-left: 5px solid; border-left-color: #000000; border-right: 5px solid; border-right-color: #000000; text-align:center; font-weight:bolder; font-size:x-large; font-family:Comic Sans MS, Times New Roman, Charcoal,sans-serif; display:block; } .titulo1{ background-color:#F0FFFF; border-bottom: 3px solid; border-bottom-color: #000000; border-top: 3px solid; border-top-color: #000000; border-left: 3px solid; border-left-color: #000000; border-right: 3px solid; border-right-color: #000000; text-align:center; font-weight:bolder; font-size:large; font-family:Comic Sans MS, Times New Roman, Charcoal,sans-serif; display:block; } .titulo2{ background-color:#F0FFFF; border-bottom: 3px solid; border-bottom-color: #000000; border-top: 3px solid; border-top-color: #000000; border-left: 3px solid; border-left-color: #000000; border-right: 3px solid; border-right-color: #000000; text-align:center; font-weight:bolder; font-size:xx-large; font-family:Comic Sans MS, Times New Roman, Charcoal,sans-serif; display:block; } .titulo3{ background-color:#F0FFFF; border-bottom: 3px solid; border-bottom-color: #000000; border-top: 3px solid; border-top-color: #000000; border-left: 3px solid; border-left-color: #000000; border-right: 3px solid; border-right-color: #000000; text-align:center; font-weight:bolder; font-size:small; font-family:Comic Sans MS, Times New Roman, Charcoal,sans-serif; display:block; } 
    .divId1{
            background-color:#FFF5EE;
            border-bottom: 2px solid;
            border-bottom-color: #FF0000;
            border-top: 4px solid;
            border-top-color: #FFA500;
            border-left: 5px solid;
            border-left-color:#FFDEAD;
            border-right: 7px solid;
            border-right-color: #8B4513;   
            display:block;                         
            }
            .divId1_1{
            background-color:blue;
            color:yellow;
            border-bottom: 2px solid;
            border-bottom-color: #FF0000;
            border-top: 4px solid;
            border-top-color: #FFA500;
            border-left: 5px solid;
            border-left-color:#FFDEAD;
            border-right: 7px solid;
            border-right-color: #8B4513;   
            display:block;                         
            }
            .divId1_2{
            background-color:black;
            color:white;
            border-bottom: 2px solid;
            border-bottom-color: #FF0000;
            border-top: 4px solid;
            border-top-color: #FFA500;
            border-left: 5px solid;
            border-left-color:#FFDEAD;
            border-right: 7px solid;
            border-right-color: #8B4513;   
            display:block;                         
            }
            .divId1_3{
            background-color:green;
            color:yellow;
            border-bottom: 2px solid;
            border-bottom-color: #FF0000;
            border-top: 4px solid;
            border-top-color: #FFA500;
            border-left: 5px solid;
            border-left-color:#FFDEAD;
            border-right: 7px solid;
            border-right-color: #8B4513;   
            display:block;                         
            }
            .divId1_4{
            background-color:#C0C0C0;
            color:black;
            border-bottom: 2px solid;
            border-bottom-color: #FF0000;
            border-top: 4px solid;
            border-top-color: #FFA500;
            border-left: 5px solid;
            border-left-color:#FFDEAD;
            border-right: 7px solid;
            border-right-color: #8B4513;   
            display:block;                         
            }
            .divId1_5{
            background-color:#FF7F00;
            color:yellow;
            border-bottom: 2px solid;
            border-bottom-color: #FF0000;
            border-top: 4px solid;
            border-top-color: #FFA500;
            border-left: 5px solid;
            border-left-color:#FFDEAD;
            border-right: 7px solid;
            border-right-color: #8B4513;   
            display:block;                         
            }
    </style>
//danilomatias19@gmail.com //Esse codigo mostra apenas algumas propriedades dos navegadores, monta o html dentro do
//todo via DOM //obtenho o elemento DOM atraves de getElementById(), mais tarde necessitarei acrescentar novos elementos com appendChild() var id1= document.getElementById('id1'); //crio a div com DOM var idid1=document.createElement("div"); //seto o id com DOM semelhante a <div id="did1" idid1.setAttribute('id','idid1'); //seto a classe com DOM semelhante a <div id="did1" class="divId1" idid1.setAttribute('class','divId1'); //seto via css o font size DOM semelhante a
idid1.style.fontSize="small"; //abaixo eu coloco a tag
dentro do div idid1 (<div id="idid1")semelhante a

idid1.appendChild(document.createElement("br")); //abaixo eu coloco o texto dentro do div idid1 (<div id="idid1")semelhante a

Lorem ipsum dolor sit amet, ... idid1.appendChild(document.createTextNode('Lorem ipsum dolor sit amet, consectetur adipisicing elited do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum')); idid1.appendChild(document.createElement("br")); idid1.appendChild(document.createElement("br")); var ididt=document.createElement("div"); ididt.setAttribute('id','ididt'); ididt.setAttribute('class','titulo'); ididt.appendChild(document.createTextNode('Exemplo simples de manipulacao DOM e css via javascript')); id1.appendChild(ididt); id1.appendChild(idid1); var idid2=document.createElement("div"); idid2.setAttribute('id','idid2'); var slct1 = document.createElement("select");//crio o <select slct1.setAttribute('id','idslct1'); // <select id="idslct1" var opt2 = document.createElement("option"); //<option opt2.text="Preto";//Preto opt2.setAttribute('id','idopt2');//Preto var opt1 = document.createElement("option"); opt1.text="Azul"; opt1.setAttribute('id','idopt1'); var opt3 = document.createElement("option"); opt3.text="Verde"; opt3.setAttribute('id','idopt3'); var opt4 = document.createElement("option"); opt4.text="Cinza"; opt4.setAttribute('id','idopt4'); var opt5 = document.createElement("option"); opt5.text="Laranja"; opt5.setAttribute('id','idopt5'); slct1.add(opt5,null); //aqui coloco o option no select Laranja slct1.add(opt4,opt5); // CinzaLaranja slct1.add(opt3,opt4); // VerdeCinzaLaranja slct1.add(opt2,opt3); slct1.add(opt1,opt2); idid2.appendChild(document.createTextNode('Cores da borda direita e esquerda da div acima')); idid2.appendChild(document.createElement("br")); idid2.appendChild(slct1); id1.appendChild(idid2); //função para eventos DOM2 essa função serve apenas para tratar de maneira diferente no ie ou o firefox //passo o objeto, o evento, e a função function addEvent1(obj, evType, fn){ if (obj.addEventListener){ obj.addEventListener(evType, fn, true); } if (obj.attachEvent){ obj.attachEvent("on" + evType, fn); } } function mouseClick_opt1() { opt1.style.backgroundColor="blue"; opt1.style.color="yellow"; idid1.style.borderRightColor="blue"; idid1.style.borderLeftColor= "blue"; ididt.setAttribute('class','titulo'); } function mouseClick_opt2() { opt2.style.backgroundColor="black"; opt2.style.color="white"; idid1.style.borderRightColor="black"; idid1.style.borderLeftColor= "black"; ididt.setAttribute('class','titulo1'); } function mouseClick_opt3() { opt3.style.backgroundColor="green"; opt3.style.color="yellow"; idid1.style.borderRightColor="green"; idid1.style.borderLeftColor= "green"; ididt.setAttribute('class','titulo2'); } function mouseClick_opt4() { opt4.style.backgroundColor="#C0C0C0"; opt4.style.color="yellow"; idid1.style.borderRightColor="#C0C0C0"; idid1.style.borderLeftColor= "#C0C0C0"; ididt.setAttribute('class','titulo3'); } function mouseClick_opt5() { opt5.style.backgroundColor="#FF7F00"; opt5.style.color="yellow"; idid1.style.borderRightColor="#FF7F00"; idid1.style.borderLeftColor= "#FF7F00"; ididt.setAttribute('class','titulo'); } function DOM2mouseClick_opt1() { //altero via javascript o css do option1 (0) e as bordas direita e esquerda opt1.style.backgroundColor="blue"; opt1.style.color="yellow"; idid1.style.borderRightColor="blue"; idid1.style.borderLeftColor= "blue"; //altero a classe css do titulo ididt.setAttribute('class','titulo'); //altero a classe css da divId1 idid1.setAttribute('class','divId1_1'); } function DOM2mouseClick_opt2() { opt2.style.backgroundColor="black"; opt2.style.color="white"; idid1.style.borderRightColor="black"; idid1.style.borderLeftColor= "black"; ididt.setAttribute('class','titulo1'); idid1.setAttribute('class','divId1_2'); } function DOM2mouseClick_opt3() { opt3.style.backgroundColor="green"; opt3.style.color="yellow"; idid1.style.borderRightColor="green"; idid1.style.borderLeftColor= "green"; ididt.setAttribute('class','titulo2'); idid1.setAttribute('class','divId1_3'); } function DOM2mouseClick_opt4() { opt4.style.backgroundColor="#C0C0C0"; opt4.style.color="yellow"; idid1.style.borderRightColor="#C0C0C0"; idid1.style.borderLeftColor= "#C0C0C0"; ididt.setAttribute('class','titulo3'); idid1.setAttribute('class','divId1_4'); } function DOM2mouseClick_opt5() { 
                                                                    opt5.style.backgroundColor="#FF7F00"; opt5.style.color="yellow";  idid1.style.borderRightColor="#FF7F00"; idid1.style.borderLeftColor= "#FF7F00";                                                                      
                                                                    ididt.setAttribute('class','titulo');
                                                                    idid1.setAttribute('class','divId1_5');
                                                            }
                                                            function opc_selectIndex(i)
                                                            {
                                                            //como o indice do option selecionado comeca em 0 e as minhas funcoes
                                                            //comecam em 1 eu incremento ele
                                                                    i++;
                                                                    //se a cor azul foi selecionada 1 opcao eu altero a cor de fundo via css a classe css de titulo e a da div
                                                                    if(i==1)
                                                                            mouseClick_opt1();
                                                                    if(i==2)
                                                                            mouseClick_opt2();
                                                                    if(i==3)
                                                                            mouseClick_opt3();
                                                                    if(i==4)
                                                                            mouseClick_opt4();
                                                                    if(i==5)
                                                                            mouseClick_opt5();                                                                             
                                                            }
                                                            function  DOM2opc_selectIndex2(i)
                                                            {
                                                                    i++;
                                                                    if(i==1)
                                                                            DOM2mouseClick_opt1();
                                                                    if(i==2)
                                                                            DOM2mouseClick_opt2();
                                                                    if(i==3)
                                                                            DOM2mouseClick_opt3();
                                                                    if(i==4)
                                                                            DOM2mouseClick_opt4();
                                                                    if(i==5)
                                                                            DOM2mouseClick_opt5();                                                                        
                                                            }
                                                            function  DOM2opc_selectIndex()
                                                            {
                                                                    DOM2opc_selectIndex2(document.getElementById('idslct1').selectedIndex);                                                
                                                            }
                                                                           
                                            //manipulação de eventos com DOM0
                                            //-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                                            window.onload = function(){                                            
                                                    var vidslct1 = document.getElementById('idslct1');
                                                            vidslct1.onclick=function(){
                                                                    opc_selectIndex(vidslct1.selectedIndex);                                                                       
                                                            }
                                            }
                                            //-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
                                            //manipulação de eventos com DOM2
                                            //note que passo o objeto onde aplicarei o envento o evento sem o on (no caso o evento e onclick, passo apenas click)
                                            //passo o nome da funcao que sera chamada quando ocorrer o evento onclick
                                            addEvent1(document.getElementById('idslct1'), "click", DOM2opc_selectIndex)
                                            //-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
                            </script>
    </form>
[/code]

Está funcionando em:
http://presenteperfeito.99k.org/blog/js/DOM/tjs3.html

Página do código:
http://presenteperfeito.99k.org/blog/js/DOM/tjs3_html.html

#3

Eu nao tive paciencia nem tempo para ler todo esse codigo.

Nao seria melhor, abrir um firebug ou coisa parecida, verificar se algum erro esta ocorrendo e postar os erros??
Com esse monte de codigo eh dificil de ajudar!

//Daniel

#4

O problema de achar o erro era justamente esse, no firebug, google developer tools do chrome não estavam apontando o erro, a console ficava simplesmente vazia, onde não achava o por que não funcionava … pior funcionava tudo certinho somente no firefox (firebug jamais apontaria erro, pois de acordo com o firefox estava tudo certo e funcionando) …
Então resolvi retirar o evento do <option> e colocá-lo no <select> , daí sim funcionou no chrome, opera, ie, safari e seamonkey
Agora está tudo ok …
Só tenho dúvida (por não ter encontrado alguma fonte que afirmasse categoricamente), que browsers como chrome, ie, não possuem toda grama de eventos habilitados no option,
de qualquer forma para meu desenvolvimento assumo que é preferível não colocar eventos no option e sim no select.
Se estiver errado por favor me corrijam, principalmente o moderador, que já viu tanto tipo de erro, e testou tantas coisas …
Para mim está tudo ok, com exceção dessa dúvida conceitual

Mas muito obrigado mesmo pela intenção em ajudar, principalmente pela pronta resposta …!

Abraço!

#5

Amigo,

Acredito já ter ouvido falar do jquery… senão recomendo… ou qualquer outro framework js…
ficar escrevendo javascript desta forma hoje em dia é loucura!!!

O jquery (www.jquery.com) abstrai para você esse tipo de coisa… Ele faz a parte “suja” dos ifs dos browsers e você foca mais na regra do que deseja implementar.
Sem dizer a infinidade de plugins prontos para enriquecer sua aplicação web…

Abs

#6

Concordo plenamente é loucura, porém para entender o que esses frameworks fazem é interessante
Frameworks são recomendados principalmente devido a maior dor de cabeça de todas, código cross browser,
esse código ficaria extremamente reduzido utilizando algum framework.
Entretanto como o colega Mateusvenan acabou de comentar em: http://www.guj.com.br/java/271325-duvida-js-e-ajax/2#1423628

[quote]“sistemas que mais parecem colcha de retalhos”[/quote], nesses sistemas existe muito código js, codificado sem uso de frameworks, e ao menos entendendo como js funciona é
possível tentar entender melhor como esses sistemas funcionam

É só por isso meu empenho em aprender js, com DOM e a parafernalha toda dos browsers.
Se na realidade não fóssemos encontrar essas colchas de retalhos por ai, não faria tanto sentido entender como o js
puro funciona realmente…

Só por isso acho que não é perda de tempo fazer tudo através de frameworks.
Eles realmente são um alívio e tanto em algumas dores de cabeça.

Mais uma vez muito obrigado pela pronta resposta, todos crescem com o crescimento no compartilhamento de conhecimentos.

#7

OK amigo… tbem concordo… talvez seja por que tenha primeiro aprendido javascript em 1997 e depois fui conhecer frameworks que eu veja desta maneira (ja escrevi muito javascript sem framework)… e também por dificilmente ter de mexer com sistemas com muito js nos dias de hoje.

Você esta certissimo…

Uma coisa que costumei adotar é tentar substituir pelo jquery esses sistemas e aos poucos ir refatorando o código (conforme precisa fazer manutenção)…

Mas aprender js puro com certeza é bom sim… da mesma foram que aprender C e também assembly!

ABS

#8