Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

[js] backgroundcolor uit css wijzigen

kanarievogel
6 antwoorden
  • 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.
  • bedoel je zoiets als:
    [code:1:2ca0fbdb9d]
    onmouseover="this.style.backgroundColor='0000FF'"
    of
    onmouseover="this.className='kleurB'"
    [/code:1:2ca0fbdb9d]

    t.
  • 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
  • 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.
  • 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
  • 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]

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.