0

I have two separate conditions that control foreground color and background color of a text box. The conditions are totally separate. One condition controls foreground and the other controls background. I am setting the class in JavaScript and I'm lost as to how to set the class.

Do I have a CSS element for each possibility of foreground/ background mix or is it possible to have multiple classes?

nwellnhof
  • 32,319
  • 7
  • 89
  • 113
lascoff
  • 1,321
  • 4
  • 17
  • 35
  • Can you add your CSS and JS code please. – DAC84 Feb 24 '14 at 16:31
  • 1
    You can have multiple classes on an element and here is some information on how to add/remove classes with pure JavaScript http://stackoverflow.com/questions/195951/ – HJ05 Feb 24 '14 at 16:33

2 Answers2

1

CSS

.backgroundToggled {
}

.foregroundToggled {
}

HTML 

<div id='myId'></div>

Javascript

var element = document.getElementById('myId');
if( /* condition foreground */) { 
   element.className += ' foregroundToggled';
}  
if( /* condition bacground */) { 
   element.className += ' backgroundToggled';
}

or Jquery:

if( /* condition foreground */) { 
   $('myId').addClass('foregroundToggled');
}  
if( /* condition bacground */) { 
   $('myId').addClass('backroundToggled');
}

If condition foreground && condition background are true, your div will be:

<div id='myId' class='foregroundToggled backroundToggled'></div>
Luca Davanzo
  • 21,000
  • 15
  • 120
  • 146
0

Yes, you can have multiple classes.

css:

.class1{
    background-color: blue;
}
.class2{
    color: red;
}

html

<div class="class1 class2"></div>
Matt R
  • 724
  • 5
  • 14