Jump to content

recursively set all to to 10px


midnite
 Share

Recommended Posts

<html><head>  <script language="JavaScript">	function setTo(inherit, fontSize){	  inherit.style.fontSize = fontSize;	  inherit = inherit.childNodes;	  for (i=0; i<inherit.length; i++){		for (j=0; j<inherit[i].childNodes.length; j++){		  setTo(inherit[i], fontSize);		}	  }	}  </script></head><body>  <span id="title01" style="font-size:20px">Here <span style="font-size:90">is</span> the sample text</span><br>  <button onclick="setTo(document.getElementById('title01'), 10)">change to 10px</button></body></html>

The above codes work fine. But if there is more than one <span> tag within, it will go wired :)

<html><head>  <script language="JavaScript">	function setTo(inherit, fontSize){	  inherit.style.fontSize = fontSize;	  inherit = inherit.childNodes;	  for (i=0; i<inherit.length; i++){		for (j=0; j<inherit[i].childNodes.length; j++){		  setTo(inherit[i], fontSize);		}	  }	}  </script></head><body>  <span id="title01" style="font-size:20px">Here <span style="font-size:90">is</span> the <span style="font-size:50">sample</span> text</span><br>  <button onclick="setTo(document.getElementById('title01'), 10)">change to 10px</button></body></html>

It is sort of infinitely looping. You may add some alert() functions into the function setTo() to break it, and to trace what is going wrong as well. Of course i did tried. i was working on it for hours and i still cannot find the way out!! Thanks for you help in advance :)

Edited by midnite
Link to comment
Share on other sites

You generally want to avoid using the same variable (e.g. inherit) for different things in your code. Also, I don't think you need the nested loops. You might try changing it to something like this:

function setTo(element, fontSize){	// Set the font-size.	element.style.fontSize = fontSize;	// Get all the child nodes for this element.	var children = element.childNodes;	// Loop through all the child nodes, one at a time.	for(var i = 0; i < children.length; i++)	{		// Let's add a check to verify that the node is an 		// element rather than something like a text node.		if(children[i].nodeType == 1)		{			// We found an element in the children array.			// Let's recursively call the setTo function on this			// element.			setTo(children[i], fontSize);		}	}}

Link to comment
Share on other sites

oh, thank!!i forget that the "var" is extremely important in JS..and also, the nested loop approach will create a lot of redundant recursive calling =(Thanks a lot for helping me and picking my error =)

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...