update css with javscript

Hi,

I have this page:
http://taxes.ultratrust.com/double-taxation.html

I have this js code:
    if ($("span.change2").hasClass('additalics')) {
        $('span.change2').removeClass('additalics');
        $('span.change2').addClass('italic');
    }

    if ($("span.change2").hasClass('addbold')) {
        $('span.change2').removeClass('addbold');
        $('span.change2').addClass('bold');
    }
    if ($("span.change2").hasClass('addunderline')) {
        $('span.change2').removeClass('addunderline');
        $('span.change2').addClass('underline');
    }
    if ($("span.change2").hasClass('addgreen')) {
        $('span.change2').removeClass('addgreen');
        $('span.change2').addClass('green');
    }
    if ($("span.change2").hasClass('addred')) {
        $('span.change2').removeClass('addred');
        $('span.change2').addClass('red');
    }
    if ($("span.change2").hasClass('additalic')) {
        $('span.change2').removeClass('additalic');
        $('span.change2').addClass('italic');
    }
    if ($("span.change2").hasClass('addcaption')) {
        $('span.change2').removeClass('addcaption');
        $('span.change2').addClass('caption');
    }

Open in new window


I have this html code in the table for that page:
<table>
<tr>
		<th class='left_most'>Balance of IRA Account at Passing Away</th>
		<th>$1,000,000</th>
	</tr>
	<tr class='spec'>
		<td class='left_most'>Federal Estate Tax</td>
		<td><span class='change2 addred addbold'>($500,000)</span></td>
	</tr>
	<tr class='specalt'>
		<td class='left_most'>State and Federal Income Taxes</td>
		<td><span class='change2 addred addbold'>($250,000)</span></td>
	</tr>
	<tr class='spec'>
		<td class='left_most'>Total Taxes</td>
		<td><span class='change2 addred addbold'>($750,000)</span></td>
	</tr>
	<tr class='specalt'>
		<td class='left_most'><span class='change2 addbold'>IRA REMAINING AFTER TAXES ARE PAID</span></td>
		<td><span class='change2 addbold'>$250,000</span></td>
	</tr>
</table>
<div><span class='change2 addcaption'>*The method of computation for the state and federal income taxes is difficult; thus, the amount used is an estimated figure</span></div>

Open in new window


In the above instance, all the span with classes are in red, italics and bold but I only want the some of them to be bold with red, one to be bold, and one to have the caption class.

Notice this line:
<td class='left_most'><span class='change2 addbold'>IRA REMAINING AFTER TAXES ARE PAID</span></td>
                <td><span class='change2 addbold'>$250,000</span></td>

Open in new window

only has the bold

This line:
<div><span class='change2 addcaption'>*The method of computation for the state and federal income taxes is difficult; thus, the amount used is an estimated figure</span></div

Open in new window

only has the caption.

Here is the css code:
span.red {color:#9a4638;} /*deep red*/
span.green {color:green}
span.underline {text-decoration:underline}
span.italic {font-style:italic;}
span.caption {font-style:italic;font-size:12px;}

Open in new window


Any help is appreciated.

Thank you,
Victor


Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?
 
khan_webguruConnect With a Mentor Commented:
For bold red use this class

 
span.BoldRed {color:#9a4638;font-weight:bold;} /*deep red and bold*/

Open in new window


Like this

 
<span class="BoldRed"></span>

Open in new window


And for ONLY bold use this

 
span.OnlyBold{font-weight:bold;}

Open in new window


same like previous set span class BoldOnly

and

for caption use like this

 
span.caption {font-style:italic;font-size:12px;}

Open in new window


use like this

 
<span class="caption"></span>

Open in new window


hope this will help you

thanks,
0
 
cb1393Commented:
Not sure what you need help with... it seems like you want to explicitly style certain elements on your page, which you appear to be doing already. Can you be more specific as to what you are wanting to do?
0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi cb1393 & khan_webguru,

Sorry, I wasn't clear.

In this page:
http://taxes.ultratrust.com/double-taxation.html

"...ALL the <span> tags have classes and ALL of them are in red, italics and bold BUT I only want the SOME of them to be bold with red, ONE of the <span> tags should ONLY to be bold, and ANOTHER of the <span> tags to ONLY have the caption class..."

See the code above.

Thank you,
Victor

0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
To clarify, I want the Javascript to change the css code rather than simply use the CSS directly as suggested by khan_webguru. So the above Javascript code should search for all <span> tags where the class='change2' and then asks if this class also has a class='addred' or a class='addunderline' or a class='addcaption' etc. If the class, for instance, is class='change2 addcaption' then the class would be changed to class='change2 caption' from the Javascript.

What's happening is that if the class='change2 addcaption' the Javascript is changing it to class='change2 caption, red, bold' rather than simply class='change2 caption'. Actually, all the classes are changed to class='change2 caption, red, bold' which isn't what I want it to do.

So, in summary, I want the following to occur:
WHERE class='change2 addcaption' should be dynamically changed to class='change2 caption'
WHERE class='change2 addred addbold' should be dynamically changed to class='change2 red bold'
WHERE class='change2 addbold' should be dynamically changed to class='change2 bold'

Hope this clarifies it.
0
All Courses

From novice to tech pro — start learning today.