midnite Posted March 26, 2007 Share Posted March 26, 2007 <html><head> <style type="text/css"> .custom { font-size: 20px; color: red; } .default { font-size: 10px; color: blue; } </style> <script language="JavaScript"> function change(){ document.getElementById("title02").class = "default"; } </script></head><body> <font id="title01" class="default">Here is the default text</font><br> <font id="title02" class="custom">Here is the custom text</font><br> <button onclick="change()">change to default</button></body></html> here is my page and i want to change "title02" to the "default" CSS style. Please be noted that it DOES NOT WORK but it is just showing the idea. This is just an example so there is only two attributes "font-size" and "color". For real case, there will be a lot of settings. So changing the style one-by-one is not a wise choice. Is there a way to change them together like what the codes shown above? Link to comment Share on other sites More sharing options...
aspnetguy Posted March 26, 2007 Share Posted March 26, 2007 first I'll point out that using <font> is a bad idea and is depreciated along time ago.here is how you do it var elem = document.getElementById("title02");elem.className = "default"; Link to comment Share on other sites More sharing options...
midnite Posted March 26, 2007 Author Share Posted March 26, 2007 oh! great!!not using <font>, what should i use then? or what is better? Link to comment Share on other sites More sharing options...
aspnetguy Posted March 26, 2007 Share Posted March 26, 2007 if you need an inline element use <span> or if you need a block element use <div> Link to comment Share on other sites More sharing options...
midnite Posted March 26, 2007 Author Share Posted March 26, 2007 <html><head> <style type="text/css"> .custom { font-size: 20px; color: red; } .default { font-size: 10px; color: blue; } </style> <script language="JavaScript"> function change(){ document.getElementById("title02").className = "default"; } function stripPx(text){ return text.substr(0, (text.length>2 ? text.length-2 : 0)); } function enlarge(){ var elem = document.getElementById("title02"); elem.style.fontSize = stripPx(elem.style.fontSize) * 1.5; } function back(){ document.getElementById("title02").className = "custom"; } </script></head><body> <span id="title01" class="default">Here is the default text</span><br> <span id="title02" class="custom">Here is the custom text</span><br> <button onclick="change()">change to default</button> <button onclick="enlarge()">enlarge the font</button> <button onclick="back()">change to custom</button></body></html> one more question. If i want to enlarge it by 50%, what should i do? i found that i cannot access (retrieve) the value if it was set by css. Otherwise, if it was set by JS "elem.style.fontSize = 20;", then i can get the value "20" by stripping the "px" after. Is there a way to enlarge it for 50% from CSS, not from JS?and also, if i change the enlarge() function to: function enlarge(){ var elem = document.getElementById("title02"); elem.style.fontSize = 30; } it works of course. But i cannot change it back by the function back(). Link to comment Share on other sites More sharing options...
aspnetguy Posted March 26, 2007 Share Posted March 26, 2007 Js can only access the inline css of an elem. So the global css you declared on your page cannot be seen or acessed by JS.you could access the <style> tag though and parse it with JS if you really wanted to knwo the values but ti would be much slower. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now