ny table style on-the-fly

Du kan hente alle stylesheets i dokumentet med

  var coll = document.styleSheets

Så får du et array, du kan løbe igennem med en for-løkke. Hvis du kun har et stylesheet i dokumentet, kalder du blot:

  document.styleSheets[0]

Når du har fat i stylesheet'et, kan du hente alle dets regler med:

  var coll = document.styleSheets[0].rules

og løbe det igennem med en for-løkke.

"rules" er et array med en række "item"s, der hver har en "selectorText" - f.eks. 'table' eller '.myClass'. Du kan f.eks. gøre sådan her for at omdefinere table-reglen:

  for (i=0; i<coll.length; i++) {
    if (coll[i].selectorText == 'table') coll[i].style.border = '2px solid red'
    }

I dit eksempel ovenfor ville du også kunne omdefinere table-reglen med:

  document.styleSheets[0].rules.item(0).style.border = '2px solid red'

men kun fordi du ved, at du kun har et stylesheet, dvs. styleSheets(0), og at table-reglen er den første regel, dvs. rules.item(0). Metoden med for-løkken, hvor du undersøger om selectorText har en bestemt værdi, er mere sikker, hvis du senere tilføjer flere regler i stylesheet'et.

hmm ok lækkert!
hvis jeg ønsker at lave 2 styles til tables

1 til dem hvor border = 1
og et til dem hvor border = 0

det jeg vil fuske mig frem til er at lave alle table border røde hvis border = 0 og eks. grønne hvis de er = 1

jeg kan ikke definere classes eller lign. da det er dynamisk indhold!

håber i forstår lidt af mit krypteret spørgsmål ;)
(en slags if sætning i css)

Hvilke browsere skal det understøtte?

IE understøtter jo muligheden for (via javascript) at traversere gennem alle sidens elementer via getElementsByTagName (eller deromkring)...

OK - det tror jeg altså ikke kan lade sig gøre?! Men du kan bruge en anden fremgangsmåde. Du kan lave en funktion, der finder alle tabeller og ændrer deres border på denne måde (har ikke lige testet det, men det burde virke):

function changeBorder() {
  var coll = document.getElementsByTagName('TABLE');
  for (i=0; i<coll.length; i++) {
    switch (coll[i].style.borderWidth) {
      case null: coll[i].style.border = '1px red solid'; break;
      case '1px': coll[i].style.borderColor = 'green'; break;
      //osv.
      }
    }
}

- og så får du jo også adgang til elementernes properties, hvorved du kan læse om border = 0 eller 1 og sætte styles derefter...

Nå, der kom midas _dk lige ind imellem - og du har jo fuldstændigt ret :-)

Hehe... edutasia styrer! Men Overwrite: hvorfor vil du have border til at være grøn, hvis man ikke kan se den?

Eller røde, var det... ;-)