Page 1 of 1
Style Appliance
Posted: Sat Jan 18, 2003 9:51 am
by Gen-ik
I've been trying to work this out for a while but it all ends up going pear shaped!
I have a Stylesheet with a load of pre-setup styles (obviously) and I want to apply X style to X object using a JavaScript function.
Let's say I have a <table> with a style class set to it and I want to change that style class to another one from the Stylesheet.... can it be done?
I'm talking about a "real-time" change here and not a "you must reload the page" change
I know you can do things like onmouseover="this.style.background.... blablaa but I want to apply an entire class not bits and pieces!
Thanks.
Posted: Mon Jan 20, 2003 5:13 am
by f1nutter
Just a guess.
How about javascript writing the table header, with the different style options.
So:
Code: Select all
if (style == 1)
{
document.write('<table class="style1">');
}
else if (style == 2)
{
document.write('<table class="style2">');
}
else
{
('<table class="style3">');
}
Then read in the style value from a check list or something.
Also, you could place the table inside a div and change it that way.
What have you got to lose!
Posted: Mon Jan 20, 2003 5:18 am
by f1nutter
Posted: Mon Jan 20, 2003 5:51 am
by volka
also try
Code: Select all
<html>
<head>
<style type="text/css">
.selected { color: yellow; background-color: blue; }
.default { color: black; background-color: silver; }
</style>
</head>
<body>
<table border="1" class="default">
<tr>
<td onmouseover="this.className='selected';" onmouseout="this.className='';">
test
</td>
<td onmouseover="this.className='selected';" onmouseout="this.className='';">
test
</td>
<tr>
</tr>
<td onmouseover="this.className='selected';" onmouseout="this.className='';">
test
</td>
<td onmouseover="this.className='selected';" onmouseout="this.className='';">
test
</td>
</tr>
</body>
</html>
Posted: Mon Jan 20, 2003 10:08 am
by Gen-ik
Aha! Got it working at last
I've made a little function to make things easier.. use as you wish.
Code: Select all
<script language="JavaScript">
function s(my)
{
var name_length=my.className.length;
var check=my.className.substr(name_length-1,name_length);
if(check=="B")
{
my.className=my.className.substr(0,name_length-1);
}
else
{
my.className=my.className+"B";
}
}
</script>
..all you need to do is create two version of a class, and put a B at the end of the second ones name, for example..
td.box { background-color: #ff0000; }
td.boxB { background-color: #00ff00; }
..and now just call the function any where you like, for example..
<td class="box" onmouseover="s(this);" onmouseout="s(this);">
..the function will automatically work out which version of the class to use.
Enjoy
