ugrás a tartalomhoz

lekerekitett sarkok + DOM manipuláció

teamtom · 2005. Szep. 1. (Cs), 10.59
A következő problémával kapcsolatban várom a segítségeteket:

Extra tag-ek használatával (lásd: http://www.webreference.com/programming/css_borders/index.html)
építettem flexibilis lekerekített sarkú dobozokat.

Ez tök jól működik, de a plusz tag-ek (<b></b>) miatt nem szép.

DOM/DHtml manipulációval futásidőben létrehozhatók a szükséges tag-ek, a helyzet itt bonyolódik el.

FF és Opera8 alatt tökéletesen, elvárásaim szerint működik a következő javascript:
  1. function roundedCorners() {  
  2.     var divs = document.getElementsByTagName('div');  
  3.     var rounded_divs = [];  
  4.     // az összes "tesztbox" osztályú div megkeresése   
  5.     for (var i = 0; i < divs.length; i++) {  
  6.         if (/\btesztbox\b/.exec(divs[i].className)) {  
  7.             rounded_divs[rounded_divs.length] = divs[i];  
  8.         }  
  9.     }  
  10.       
  11.     for (var i = 0; i < rounded_divs.length; i++) {  
  12.         var original = rounded_divs[i];  
  13.         var originalscontent = rounded_divs[i].childNodes[1];  
  14.         original.removeChild(originalscontent); // az IE itt akad el;  
  15.         // az eredeti tartalom törlése  
  16.         while (original.firstChild!=null) {  
  17.             original.removeChild(original.firstChild);   
  18.         }  
  19.           
  20.         var bfelette1 = document.createElement('b');  
  21.         bfelette1.className='b1';  
  22.         var bfelette2 = document.createElement('b');  
  23.         bfelette2.className='b2';  
  24.         var bfelette3 = document.createElement('b');  
  25.         bfelette3.className='b3';  
  26.         var bfelette4 = document.createElement('b');  
  27.         bfelette4.className='b4';  
  28.         var balatta1 = document.createElement('b');  
  29.         balatta1.className='b5';  
  30.         var balatta2 = document.createElement('b');  
  31.         balatta2.className='b4';  
  32.         var balatta3 = document.createElement('b');  
  33.         balatta3.className='b3';  
  34.         var balatta4 = document.createElement('b');  
  35.         balatta4.className='b2';  
  36.         var balatta5 = document.createElement('b');  
  37.         balatta5.className='b1';  
  38.           
  39.         original.appendChild(bfelette1)  
  40.         original.appendChild(bfelette2)  
  41.         original.appendChild(bfelette3)  
  42.         original.appendChild(bfelette4)  
  43.           
  44.         original.appendChild(originalscontent);  
  45.           
  46.         original.appendChild(balatta1)  
  47.         original.appendChild(balatta2)  
  48.         original.appendChild(balatta3)  
  49.         original.appendChild(balatta4)  
  50.         original.appendChild(balatta5)  
  51.     }  
  52. }  
  53. window.onload = roundedCorners;  
A legkevésbé sztenderd böngésző az első .removeChild() sornál
vagyis itt: original.removeChild(originalscontent);
Type Mismatch hibajelzéssel elakad.
Azért gondolom, hogy itt, mert ha enterekkel lejjebb viszem ettől a sortól, a hibaüzenet helye is "lejjebb megy".

Én tudom rosszul, vagy az IE?
Mi a megoldás?
Hiába az elegáns(abb) megoldás, ha az IE (piaci részesedése) miatt nem használhatom. :(

Köszönettel: teamtom
 
1

Egy tipp

sajt · 2005. Szep. 2. (P), 12.21
Probald meg az original-t atnevezni mondjuk eredetire.
--
Ámon Tamás - http://amon.hu
2

Lekerekitett sarkok + DOM manipuláció megoldása

teamtom · 2005. Szep. 2. (P), 17.12
Megtaláltam a hibát, illetve a megoldást:

a fenti szkript 13. sorában:
  1. var originalscontent = rounded_divs[i].childNodes[1];  
a második gyermek node-ot (.childNodes[1]) választottam ki, mint az eredeti tartalom csomópontját (eköré kerülnek az extra tag-ek), mivel a Firefox DOM inspectorában azt találtam, hogy e node elé és mögé egy-egy text-node bekerül a forráskód indentálása miatt

az IE valószínűleg nem kezeli extra node-ként ezeket, mert amikor az originalscontent-et nem feltételezett sorszámával, hanem az osztálynevével azonosítva képeztem, már az IE is megtalálta.
Tehát a 13. sor definicióját az alábbival kell helyettesíteni:
  1. for (var j = 0; j < rounded_divs[i].childNodes.length; j++) {  
  2.    if (rounded_divs[i].childNodes[j].className=="tesztboxcont")) {  
  3.       var originalscontent = rounded_divs[i].childNodes[j];  
  4.    }  
  5. }