Jump to content

JS changing CSS


midnite
 Share

Recommended Posts

<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

<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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...