CODEWITHSUNDEEP
javascripthtmlcss
lascoff
lascoff

Reputation: 1331

CSS control of foreground and background

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?

Upvotes: 0

Views: 309

Answers (2)

Luca Davanzo
Luca Davanzo

Reputation: 21528

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>

Upvotes: 1

Matt R
Matt R

Reputation: 734

Yes, you can have multiple classes.

css:

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

html

<div class="class1 class2"></div>

Upvotes: 0

Related Questions