Torsche: Style Eigenschaften im getElementById

Hallo Freunde des SelfHTML Forums
Ich freue mich natürlich das dieses Forum wieder geöffnet ist. Allerdings schlage ich mich zur Zeit, wie viele andere auch mit dem getElementById Tag rum. Schritt für Schritt komm ich auch weiter, nun mein Problem. Ich möchte unter zuhilfenahme von Arrays diverse Styles über Funktionen austauschbar machen. Jedoch hab ich nirgends entsprechende Dokumentationen gefunden, die dieses gewährleisten. Das unten abgebildete Script, ist Teil eines komplexen Scripts was im Nachhinein crossbrowserkompaktibel gekürtzt werden soll.Jedoch dürfte der Auszug, mein Problem schildern.Im NC 4 und IE läuft es,jedoch erhalte ich unter NC 6 keine Anzeige wie es unter IE und NC 4 geht.Im Debugger von IE und NC 4 wird mir kein Fehler angezeigt.
Faktisch kann jedoch der Fehler nur versteck0 oder beweg= funktion des else getElementbyID Tags stecken. Jedoch weiß ich nicht wo, vielleicht kann mir ja einer weiterhelfen??

<HTML><HEAD><TITLE>Homepage</TITLE><style>
.pos1{position: absolute;top: 130;left:-100;font-weight:bold;visibility:hidden;z-index:0}
</style>
</HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
var fs=120;var fs1=30;var aa=0
var farbe=new Array ("aaaaaa","000000")
var txt0=new Array ("W", "B", "u", "b", "WBub");
var a=0;
var i=0;

function versteck0()
{if(a==6){a=-1;bau0();}
else{a++;
if (document.layers){document.layers.f4.visibility = "show" ;}
if (document.all){document.all.f4.style.visibility = "visible";}
else {document.getElementById("f4").style.visibility = "visible";}
window.setTimeout ('versteck0()',1);}}

function beweg0(startx,starty,fs,endx,endy,fk,steps)
{if(document.layers)
{
document.layers.f4.document.open();
document.layers.f4.document.write('<div style=font-size:'+fs+'px;color:'+farbe[i]+'><b>'+txt0[4]+'</b></font></div>');
document.layers.f4.document.close();
document.layers.f4.left=startx;
document.layers.f4.top=starty;}
if(document.all){
document.all.f4.innerHTML= "<div style=font-size:"+fs+";color:"+farbe[i]+"><b>"+txt0[4]+"</b></font></div>"
document.all.f4.style.left=startx;
document.all.f4.style.top=starty;}
else {
document.getElementById("f4").style.innerHTML="<div style=font-size:"+fs+";color:"+farbe[i]+"><b>"+txt0[4]+"</b></font></div>"
document.getElementById("f4").style.left=startx;
document.getElementById("f4").style.top=starty;
}
fs+=(fk-fs)/steps
startx+=(endx-startx)/steps;
starty+=(endy-starty)/steps;
if(steps>0){setTimeout('beweg0('+ startx +','+ starty +','+fs+','+ endx +','+ endy +','+fk+','+ (steps-1) +')', 2);}
else {a==0;}}
function bau0()
{beweg0(200,100,fs,650,100,fs1,100);}
</SCRIPT>
<BODY onload="window.setTimeout ('versteck0()', 2000)">
<div id="f4" class="pos1"></div>
</BODY></HTML>

mfg Torsche

  1. Hallo Torsche,

    Faktisch kann jedoch der Fehler nur versteck0 oder beweg= funktion des else getElementbyID Tags stecken. Jedoch weiß ich nicht wo, vielleicht kann mir ja einer weiterhelfen??

    Zunächst: getElementById() ist kein TAG, sondern eine Methode/Funktion und hat als solches erst mal "nix".
    Es "liefert" als Ergebnis ein "HTML-Object" (nodeElement) und deshalb kannst du danach einfach mit .style etc weitermachen.

    Der Fehler ist aber im NS6 Teil versteckt:

    else {document.getElementById("f4").style.visibility = "visible";}

    ist noch kreent, denn .style ist eine Eigenschaft von einem DOM-Element (deinem DIV)

    document.getElementById("f4").style.innerHTML="<div style=font-size:"+fs+";color:"+farbe[i]+"><b>"+txt0[4]+"</b></font></div>"

    bingo: innerHTML gehört dem DIV und nicht .style, also:

    document.getElementById("f4").innerHTML="<div ...

    Du könntest deinen Script auch erheblich kürzen (was du ja vorhast) wenn du z.B.

    var elt = document.getElementById("f4");
    with (elt.style) {
      bla=blubb
      xy=z
    }
    verwendest.
    Das steigert auf Dauer die Ausführungsgeschwindigkeit, da der JS-Interpreter bei jedem "." erstmal prüft, ob es das Teil danach (getElementById und dann style)
    auch gibt, die Parmeter stimmen usw. was bei hunderten von
    document.getElementById("f4").style
    document.getElementById("f4").style
    document.getElementById("f4").style
    ...
    auch Zeit kostet, wo hingegen ein fertiges Objekt (z.B. var sty = document.getElementById("f4").style nur einmal geprüft wird, bei der ersten Zuweisung.

    Viel Spaß beim "WBub" scrolling :)

    CirTap

    1. Hallo Tap
      Ich möchte mich recht herzlich, für deine Asführungen bedanken.
      mfg Torsche