Jump to content
  • Advertisement
Sign in to follow this  
Tradone

[web] DHTML and Changing CSS help

This topic is 4500 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

let's say I have this <style type="text/css"> .effhelper { background-color:hotpink; } </style> and let's say I have about 50 table's that is set to class=effhelper I want to dynamically change the background-color of effhelper. Is that possible?

Share this post


Link to post
Share on other sites
Advertisement
possible, yes, but really hard to get to work right. You would be better off dynamically changing the classname of the tables using something like:


document.getElementsByTagName("table")[0].className="class2";


and just iterate through all the tables.

Alternately, you can add a classname rather than changing the classname, as follows:


document.getElementsByTagName("table")[0].className="effhelper class2";


More info about using multiple classnames here.

Share this post


Link to post
Share on other sites
Well, it's really complicated to explain (probably gonna take me more than 15 minutes as to why and such. more like a thesis paper) but I HAVE to change the style sheet. I didn't want to go into detail about this complicated problem, so I just said 50 tables.

hey, thanks for the link.
ratings++

edit: n/m I already rated you up in the past :)

Share this post


Link to post
Share on other sites
I wonder if you could use a php file as a CSS document? In theory as long as it outputs in plain text in the right format it should work.

You could then have some sort of code in the php file which changes the value of the colour property.. IE:


<style type="text/css">
.effhelper {
background-color: <?php if($val = true) echo "red"; else echo "blue" ?>;
}
</style>


link it in your head section as "stylesheet.php" instead of "stylesheet.css" and it should work. You could possibly even pass a value to it, ie


<link href="../style.php?val=false" rel="stylesheet" type="text/css">


Note, ive never tried this, but I dont see why it shouldnt work!

Share this post


Link to post
Share on other sites
One reason why that won't work (or is undesirable) is browser caching. CSS files are nice because they get cached by the browser, cutting your bandwidth usage. A dynamically generated CSS can work, but you'd have to emit HTTP headers to prevent caching.

A better way would be to use a static CSS and remove the few CSS rules that need to be dynamic, then put those rules in <style> tags in the HTML <head> section in the PHP file.

Share this post


Link to post
Share on other sites
Quote:
Original post by Sander
One reason why that won't work (or is undesirable) is browser caching. CSS files are nice because they get cached by the browser, cutting your bandwidth usage. A dynamically generated CSS can work, but you'd have to emit HTTP headers to prevent caching.

Well, yes and no. As long as you add a custom parameter to the stylesheet url, a browser will consider it a new page:

<link href="css.php?color=lightblue" rel="stylesheet" type="text/css">
<link href="css.php?color=uglygreen" rel="stylesheet" type="text/css">

As long as the contents of these pages is consistent with the parameters parsed, there probably won't be a problem.
However, if it's just the background color of one css class that changes, you shouldn't reload the complete stylesheet. Consider adding <style> tags inline or linking to a second dynamic stylesheet containing only the style for the effhelper class.

Share this post


Link to post
Share on other sites
One possibility is to use the DOM to modify the contents of the style element. I don't know whether this works though.

The style element should contain a single child node which is either a text node or a cdata node - therefore you should be able to find this node using DOM.

Once found, it should be a matter of just changing the value of this node to whatever CSS rules you want to replace the previous ones with - and a well-behaved browser* will immediately change the style of the page as appropriate.

Mark

* i.e. none of them probably, but it's worth a try :)

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!