Is it possible to assign properties of one CSS class to another class? If it can not be done with CSS, I can use server-side scripting to pass variables.
For example, if I have a list of classes from .myclass1 to .myclass20 and I know that for user7 I need to replace .myDefault with myClass7, how can I do that?
You want all properties in a class to be inherited by another class in CSS.
Not for both classes to be applied on an object dynamically by JS.
That can't be done directly with CSS and a JS approach would consume quite a bit of time for you to implement.
Best choice is for you to look into less css.
It does what you want, either server side or clientside.
In jQuery you could this code:
$('.myDefault').addClass('myClass7');
$('.myClass7').removeClass('myDefault');
This isn't a direct answer, but if you want a mix of settings you can use multiple classes:
bigFont{
font-size:150%;
}
errorBox{
border:4px dashed red;
}
typMessage{
padding:2px;
margin:1px;
overflow-y:auto;
}
<div class="typMessage">Hello World</div>
by adding the "errorBox" and/or "bigFont" class to the element it will "merge" the CSS properties.
Here's a simple way to swap classes without jQuery: http://jsfiddle.net/imsky/mrKHB/
HTML:
<div id="test" class="big one sans phone">Hello world and </div>
CSS:
.one {background:blue;color:#fff}
.two {background:yellow;color:#000}
.sans {font-family:sans-serif}
.big {font-size:24px}
.phone:after {content:"phone!"}
JavaScript:
document.getElementById("test").onclick = (function(){
this.className = this.className.replace(/\bone\b/,"two");
});
You can use PHP to handle this for you. Just replace e.g.
<div class='myDefault'></div>
with
// you should have that info stored somewhere anyway :)
$userClass = 'myClass7';
// now just echo out the right class for the user
<div class="<?php echo $userClass ?>"></div>
