• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Eigenschaften von Tabellenzellen

turminal

turminal

New member
hi!
hab mal ne javascript frage:
wie kann ich eigenschaften von objekten/zellen rausfinden (breite, höhe, x, y etc.)?
 
High

Es ist dabei die Frage, wie die Formatierungen vorliegen,
ob als einfaches html-Attribut, lokale style-Definition, in die
Datei eingebundene solche, externe css-Datei, als eine der
möglichen Kombinationen - oder eben als javascript-Anweisung.
Der IE6 kennt zum Glück currentStyle, was die Sache aufs
nötigste beschränkt. Der NN6.1 hat sowas nicht, soweit ich
bisher weiß. Ich kann mich natürlich täuschen, und wäre
dankbar, wenn mich jemand über meinen Irrtum aufklären
könnte. Das könnte möglicherweise Arbeit sparen.
Aber nach dem, was ich weiß, muß es, damit es auch
im NN klappt, so oder so ähnlich gemacht werden:

Code: 
<html><head>
<title>tables</title>
<link rel="stylesheet" href="../StyleSheets/tables.css">
<style type='text/css'>
table{height:500;background-Color:#55d3dd}
td{height:41px;background-Color:#eed324}
div{height:26;background-Color:#f9ad24}
</style>
<script>
H=[];B=[];Q=[];
var z,st='',sh,sb,ah,ab,zz=0,N,X=0,q=document.styleSheets;
var da=document.all;
function A(a){return document.getElementsByTagName(a);};
function TD(td){return TD.arguments.length==0?document.getElementsByTagName('td'):document.getElementsByTagName('td')[td];};
function M(m){return Math.round(Math.random()*m)};
function LOAD()
{if(!da)document.captureEvents(Event.MOUSEDOWN);document.onmousedown=DOWN;
 for(i=0;i<TD().length;i++)TD(i).innerHTML=' '
 C();
};

function DOWN()
{for(i=0;i<TD().length;i++)
 with(TD(i).style)
 {height=20+M(150);
  backgroundColor=document.all?M(14197016):M(16*0x111111).toString(16);
 };
 C();
};

function C()
{for(m=0;m<q.length;m++)
  {if(!da)
   {for(j=0;j<q[m].cssRules.length;j++)
     if(q[m].cssRules[j].cssText.match(/td/i))Q[m]=q[m].cssRules[j].cssText;
     if(A('style')[0]&&A('style')[0].innerHTML.match(/td/i))Q[m]=A('style')[0].innerHTML;
    };
   X=da?q[m].cssText:Q.join();
  };

 for(i=0;i<TD().length;i++)
  {sh=TD(i).style.height;ah=TD(i).getAttribute('height');
   if(!da){if(!ah.match(/\D/))ah+='px';};
   sb=TD(i).style.backgroundColor;ab=TD(i).getAttribute('bgColor');
  
   for(n=0;n<q.length;n++)
    if(!da)
    {N=q[n].ownerNode.nodeName;
     if(N=='link')
      {for(o=0;o<q[n].cssRules.length;o++)
       q[n].cssRules[o].cssText.match(/td[^;|\}]*height:([\d]*[^;|\}]*)/i);
       ah=RegExp.$1;
      };
      
    if(zz==0&&A('html')[0].innerHTML.match(/style/i))
     {if(A('style')[0])st=A('style')[0].innerHTML;
      if(st.match(/(td.*height:([\d]*[^;|\}]*))/i))sh=RegExp.$2;
      if(st.match(/(td.*background-Color:([^;|\}]*))/i))sb=RegExp.$2;
    };
    
    if(zz==0&&X!=0)
     {st=X;
      if(st.match(/(td.*height:([\d]*[^;|\}]*))/i))sh=RegExp.$2;
      if(st.match(/(td.*background-Color:([^;|\}]*))/i))sb=RegExp.$2;                    
     };
    }; 
      
   H[i]=da?TD(i).currentStyle.height:sh?sh:ah;
   B[i]=da?TD(i).currentStyle.backgroundColor:sb?sb:ab;
   
   if(!da)
    {if(TD(i).style.height)H[i]=TD(i).style.height;
     if(TD(i).style.backgroundColor)B[i]=TD(i).style.backgroundColor;
    };
    
   with(TD(i)){innerHTML='h='+H[i]+' bg='+B[i];style.fontFamily='verdana';};
  };
  zz=1;
};
</script>
</head>
<body onload='LOAD()'>
<table  width=330 height=300 border=6>
<tr><td style='height:12em' bgColor=#0000ff></td></tr>
<tr><td style='height:28%' bgColor='red'></td></tr>
<tr><td height=70% style='background-Color:df33df'></td></tr>
<tr><td height=90 bgColor='green'></td></tr>
<tr><td style='height:332pt' bgColor='purple'></td></tr>
<tr><td height=19% bgColor='lightgreen'></td></tr>
<tr><td height=10 bgColor='gray'></td></tr>
</table>
</body>
</html>


Die externe Datei muß für den link-tag natürlich eingerichtet werden.
Bei mir sieht die - versuchshalber kurz - so aus:

table{width:677;background-Color:#a87fee;}
tr{background-Color:#a87fee;}
td{height:88px;background-Color:#ff001f;}
div{background-Color:#a87fee;}

Ich bin der Einfachheit halber davon ausgegangen, daß nur
ein style-tag innerhalb der Datei vorliegt und habe
es mal bloß für die td-Tags, und speziell für height und
backgroundColor gemacht, weil sich hier auch die Unterschiede
in den Rückgabewerten sehr gut zeigen lassen, und - in
Abhängigkeit davon - die verschiedenen Vorkehrungen, die zu
treffen sind, um die jeweiligen Werte weiterzuverarbeiten.
Es ist z.B. gut zu wissen, daß der IE6 die prozentualen Angaben
anders behandelt als der NN, oder wie die beiden sich bei
color-Rückgaben verhalten, ob hexadezimal, als rgb, oder als Farbname.
Um die verschiedenen Möglichkeiten zu überprüfen, sollten die
unterschiedlichen möglichen Kombinationen kreuzweise durchprobiert
werden.
Fürn NN4.x und für opera hab' ich's mir gespart, in der Annahme,
daß sowas sowieso bloß für Leute von Interesse ist, die sich häufiger
mit den verschiednen browsern beschäftigen und deshalb eh den
einen oder den andern haben, bzw. den sich einfach bei Bedarf
draufladen.

gruß

matho
 
Es geht nicht, ich hab Height im Script durch left ersetzt, aber dann gibt er mir immer aus, das der Wert 'auto' ist :(
 
Meinen Infos nach können diese Eigenschaften nicht ermittelt werden wenn sie nicht im Tag irgendwo angegeben wurden.

Von Elementen in denen Höhe, Breite, Farbe,... angegeben wurden, können diese auch ermittelt werden
 
Tja, dies ist aber genau mein Problem, ich benutze nämlich Klappmenüs und wenn man das Browserfenster verkleinert, dann zieht sich das Menü kleiner, da es in prozentualen Angaben ist und die Layer für die Menüs bleiben irgendwo anders 'kleben' :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben