[JS] CSS waarden veranderen

[Deddiekoel]

Is het mogelijk om dmv javascript de waarde van een sylesheet aan te passen?

Wat ik wil bereiken is het volgende:
Ik heb een tabel, elke kolom heeft een eigen klassenaam. Als ik nu iets selecteer op een pagina dan willik dat de achtergrondkleur van die klasse verandert en dus dat die hele kolom van achtergrondkleur verandert.

Eigenlijk zoals bij hotmail, alleen dan horizontaal ipv vertikaal

Kan iemand mij op weg helpen?

[Bosmonster]

Je kunt de <tr> een id geven, welke je vervolgens kunt aanspreken met document.getElementById("id").

Vervolgens kun je de style.backgroundColor property veranderen van die specifieke <tr>.

[drm]

't is imo iets netter om het met een class te doen:

code:

style:
tr.mouseout {
   background-color:#ffffff;
}

tr.mouseover {
   background-color:#f0f0f0;
}
js:

function mo ( id, onoff ) {
   document.getElementById ( id ).className =
    onoff 
   ?  'mouseover'
   :  'mouseout'
}

html:

<table>
<tr id="sjako" onMouseOver="mo('sjako',true)" onMouseOut="mo('sjako',false)" class="mouseout">
   <td>blaat</td>
   <td>spef</td>
</tr>
</table>

[Deddiekoel]

DAMN een typo

Ik wil het dus NIET horizontaal hebben maar vertikaal.

Dus niet per <tr> maar per kolom.

Kun je aan meerdere cellen eenzelfde ID meegeven en die dan als nog via bovenstaande manieren van achergrondkleur laten veranderen?

[Pelle]

Kolom kan niet. Geef je cellen bijvoorbeeld de id's k_1_1 (kolom 1, rij 1), k_1_2 (kolom 1, rij 2) etc, en ga daar met een for loopje doorheen om ze van kleur te laten veranderen.

[Verwijderd]

Op zaterdag 06 juli 2002 14:52 schreef Deddiekoel het volgende:
DAMN een typo

Ik wil het dus NIET horizontaal hebben maar vertikaal.

Dus niet per <tr> maar per kolom.

Kun je aan meerdere cellen eenzelfde ID meegeven en die dan als nog via bovenstaande manieren van achergrondkleur laten veranderen?

Een id moet uniek zijn op je pagina, dus je moet het echt met een class doen. Je hebt alle td's in dezelfde kolom allemaal aan dezelfde CSS class gekoppeld? Het is mogelijk om een class te wijzigen via document.styleSheets, ongeveer als volgt:

code:

document.styleSheets[0].rules[1].style.backgroundColor = '#369';

Dit wijzigt het 2e blok in je eerste stylesheet, en die stylesheet kan gewoon in de head van je document staan of in een aparte file. De stylesheet wordt natuurlijk niet letterlijk veranderd, maar in de browser wordt er een beetje mee gerommeld.

Als je dus de background-color van een kolom wilt wijzigen, moet je alleen even uitzoeken in de welke rule van welke stylesheet die class wordt omschreven

Voorbeeld stylesheet:

code:

body {
  color: #000;
  background-color: #fff;
}
.blok {
  color: blue;
}

Voorbeeld script:

code:

document.styleSheets[0].rules[1].style.color = 'red';

document.styleSheets en rules zijn array's, en die beginnen uiteraard bij 0 met tellen

[Deddiekoel]

Kewl!

Dat is precies wat ik zocht. Maar is er geen andere manier dan die Rules[] array om de waarden te veranderen?

[Verwijderd]

je kan elke rij in je tabel afgaan en daarvan de zoveelste cell de style wel veranderen. zie http://www.w3schools.com/dhtml/tryit.asp?filename=try_dom_tablerow_cells voor een voorbeeldje

[crisp]

Dit werkt ook, zei het erg traag bij grote tabellen:

code:

var arr = document.getElementsByTagName('td');
for (var i = 0; i < arr.length; i++) {
  arr[i].style.backgroundColor = color;
}

Voor de volledigheid even de crossbrowser manier om direct je stylesheet te overrulen:

code:

// x = de betreffende stylesheet, y = de juiste entry daarin
if (document.styleSheets[x].rules) {
  document.styleSheets[x].rules[y].style.backgroundColor = color;
} else {
  document.styleSheets[x].cssRules[y].style.backgroundColor = color;
}