anoniem Geplaatst: 27 februari 2003 Delen Geplaatst: 27 februari 2003 Het volgende probleem doet zich voor: In het HTML-deel wordt er een inputveld gedisplayed met backgroundcolor blauw, dit gaat via de CSS (input.kleurA). Mbv de function wijzigkleur (in js) wil ik de achtergrondkleur wijzigen in input.kleurB, deze kleur staat ook in de CSS. Mijn vraag is hoe laat ik de function wijzigkleur (in js) refereren aan iets uit de css? Het direct wijzigen van de kleur in een vaste kleur is niet zo moeilijk, dit lukt wel (er is voldoen over te vinden). Het probleem is echter tot op heden heb ik niets kunnen vinden met ref. naar de css. Quote Link naar reactie
anoniem Geplaatst: 27 februari 2003 Auteur Delen Geplaatst: 27 februari 2003 bedoel je zoiets als: [code:1:2ca0fbdb9d] onmouseover="this.style.backgroundColor='0000FF'" of onmouseover="this.className='kleurB'" [/code:1:2ca0fbdb9d] t. Quote Link naar reactie
anoniem Geplaatst: 27 februari 2003 Auteur Delen Geplaatst: 27 februari 2003 Javascript heeft hiet een vrij mooie manier voor: in html heb je bijvoorbeeld het volgende staan: [code:1:b17adf7e1b]<form> <input type="text" style="backgroud-color:blue"> </form> [/code:1:b17adf7e1b] als je nu aan de javascript functie het argument this meegeeft, wat verwijst naar het huidige object kun je er volgens in de functie naar de eigenschappen verwijzen: [code:1:b17adf7e1b]<script language="javascript"> <!-- function verander ( obj, kleur ) { obj.style.background = kleur; } //--> </script> <form> <input type="text" onFocus="verander( this, 'red' )" onBlur="verander( this, 'blue' )" style="background-color:blue"> </form> [/code:1:b17adf7e1b] Dit script veranders de achtergrond kleur van de input box op het moment dat de cursor er in komt te staan, en verandert hem weer terug als de cursor eruitverdwijnt. Groet Rob Quote Link naar reactie
anoniem Geplaatst: 27 februari 2003 Auteur Delen Geplaatst: 27 februari 2003 Geen van alle bovenstaande oplossingen is correct. Laat ik het nog iets nauwkeurige omschrijving: Ik wil een email-formulier bouwen waarbij ik tijdens de onSubmit beoordeel of alle noodzakelijke velden (correct) zijn ingevuld. Zo niet dan moeten de foutive velden in een afwijkende kleur (opgegeven mbv CSS) worden gemarkeerd. [code:1:27b4f2de73] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Testpage</title> <link rel="stylesheet" HREF="mysite.css"> <meta name="AUTHOR" contents> <meta name="ROBOTS" contents="NOINDEX, NOFOLLOW"> <script language="JavaScript"> function testverplicht(invoer){ // hier wordt getest en gekozen voor kleurA of kleurB uit de css ?? document.elements(i).style.background = ????? } <html> <form align="left" method="POST" action="emailform.asp?ref=<%=ref%>&ref2=<%=ref2%>" name="emailform" onsubmit="return testverplicht(document.emailform)"> <body> ...... <td>Naam<input class="kleurA" name="Naam" size="23" value=""></td><td width="100%">&</td> ..... </body> </html>[/code:1:27b4f2de73] Waarbij i in de function het juiste veld aanwijst (dit werkt allemaal al). Het gaat mij er echter alleen nog om aan het veld de juiste eigenschappen uit de css door te geven (kleurA of kleurB). Dus geen mouseover of vaste kleuren. Quote Link naar reactie
anoniem Geplaatst: 27 februari 2003 Auteur Delen Geplaatst: 27 februari 2003 Dus even voor de duidelijkheid: je hebt in een CSS stylesheet een aantal klassen gedefinieerd met een x aantal eigenschappen, waaronder één voor een correct ingevuld veld en één voor een foutief ingevuld veld. En de vraag die je stelt is: hoe moet ik een klasse dynamisch toewijzen aan een veld met behulp van JavaScript? Klopt dit een beetje? - Bas Quote Link naar reactie
anoniem Geplaatst: 27 februari 2003 Auteur Delen Geplaatst: 27 februari 2003 ALs je de klasse dynamisch wilt wijzigen kun je gewoon obj.className gebruiken. [code:1:5e3aa3730c] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Testpage</title> <link rel="stylesheet" HREF="mysite.css"> <meta name="AUTHOR" contents> <meta name="ROBOTS" contents="NOINDEX, NOFOLLOW"> <script language="JavaScript"> function testverplicht(invoer){ // hier wordt getest en gekozen voor kleurA of kleurB uit de css document.getElementById('naam').className='kleurB'; } <html> <form align="left" method="POST" action="emailform.asp?ref=<%=ref%>&ref2=<%=ref2%>" name="emailform" onsubmit="return testverplicht(document.emailform)"> <body> ...... <td>Naam<input class="kleurA" name="Naam" id="naam" size="23" value=""></td><td width="100%">&</td> ..... </body> </html> [/code:1:5e3aa3730c] Quote Link naar reactie
anoniem Geplaatst: 27 februari 2003 Auteur Delen Geplaatst: 27 februari 2003 [size=18:b216b0abbd]Bingo[/size:b216b0abbd], Het werkt. Hartelijk dank voor de assistentie. Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen