Ik wil graag een bepaald deel van m'n tekst rood hebben
en dat zou groen moeten worden als er een checkbox is
aangevinkt en vice versa. Kan iemand me vertellen hoe ik dit kan doen?
zoiets dacht ik al wel maar vind ik best lastig omdat ik heel weinig ervaring heb met javascript. ik zoek nog wel even verder of ik er nog aan uit kan komen
-edit-
ik heb nu de volgende regel:
if(form.checkbox.checked==true) maar hoe gaat het verder? hoe geef ik het stukje tekst aan dat groen of rood moet zijn, want die staat natuurlijk niet in de header. moet ik dan met variabelen werken?
Alleen op deze manier werkt het nog niet, ik heb wel meer verschillende soort css styles die dan beginnen met <style type="text/css"> maar dat maakt niks uit toch?
Thomas - 31/01/2007 12:40 (laatste wijziging 31/01/2007 12:45)
Moderator
Elk onderdeel dat je anders wilt kleuren moet je een uniek id geven, want wat je in feite doet is het aanpassen van een stijl-klasse van een tag met een bepaald id met behulp van JavaScript.
Dus of je moet meerdere aanroepen hebben van change_class, waarbij je elke keer aangeeft welk onderdeel (met welk uniek id) je wilt aanpassen, of je zet een id in een bovenliggende tag - gezien je van tabellen gebruik maakt zou je kunnen proberen de tabelrij een id te geven. Dan wordt de kleur van alle inhoud van die tabel-rij aangepast... MITS er op "lager niveau" -een tabelcel <td>- geen kleur gedefinieerd is in een stylesheet, want deze laatste kleur zal dan waarschijnlijk de gewijzigde kleur weer "overrulen", of je moet hier aparte stijlregels voor schrijven...
<style type="text/css">
.on
{
color: #0c0;
}
.off
{
color: #c00;
}
/*
hardcoded stijlopmaak gooit roet in het eten
tabelcellen worden blauw no matter what
*/
td
{
color: #00c;
}
/*
het volgende zorgt er weer voor dat dit wel goed gaat
de oorspronkelijke .on en .off die hierboven staan kunnen weg
*/
.on td
{
color: #0c0;
}
.off td
{
color: #c00;
}
</style>
<script type="text/javascript">
function change_class(id, active_class, inactive_class, condition)
{
var id = document.getElementById(id);
id.className = (condition) ? active_class : inactive_class;
}
</script>
<table border="1">
<tr id="tekst" class="off">
<td>bliep</td>
<td><input type="checkbox" onclick="change_class('tekst', 'on', 'off', this.checked)" /> klik!</td>
</tr>
</table>
<style type="text/css">
.on
{
color:#0c0;
}
.off
{
color:#c00;
}
/*
hardcoded stijlopmaak gooit roet in het eten
tabelcellen worden blauw no matter what
*/
td
{
color:#00c;
}
/*
het volgende zorgt er weer voor dat dit wel goed gaat
de oorspronkelijke .on en .off die hierboven staan kunnen weg
*/
.on td
{
color:#0c0;
}
.off td
{
color:#c00;
}
</style>
<script type="text/javascript">
function change_class(id, active_class, inactive_class, condition)