• Share this topic on Twitter and help it get discovered sooner.
  • Locked
1 reply [Last post]
Wed, 2003-08-06 16:38
Anonymous
Anonymous's picture
Guru
calgary,alberta

Hi all,

I have been trying to write some javascript to change the font sizes of a HTML Page. The following code below 'works'. It sets the fonts of ALL elements in the DOM to 20px. But however I am intersted in the code which I have commented - which increases the font sizes of all elements by 2px (Assuming I have specified pixel fonts throughout in my CSS). This does NOT work. How do I change the code !!?? Anything wrong with it ??

Its NOT a problem with parsing the string, because I also tried a custom parser function to do that, but still it does not work !!! Crying :cry: Crying

function changeFontAtNode(node) 
{
	var fontSizeString;
	for (var i = 0; i < node.childNodes.length; i ++)
	{
		changeFontAtNode(node.childNodes[i]);
	}

	if (node.style != null)
	{
		fontSizeString = node.style.fontSize;
		//node.style.fontSize = (parseInt(fontSizeString) + 2) + "px";
		node.style.fontSize = "20px";
	}
}

The function is called with a onclick="changeFontAtNode(document)" line in the HTML.

Some more testing revealed that
1. Putting a document.write(fontSizeString) BEFORE the commented line in the code gave me eternal blank null strings even though I had SEVERAL elements where I had specified pixel sizes !! Why is this so??
2. Does this mean that style.fontSize is NOT supported ? I'm using IE6 SP1 and Opera 7.11, both of which fail to change the font, (although the above code works.)

Note that I would want to change the sizes of ALL elements regardless of their ids/tags. So 'getElementById' and 'getElementByTag's are a strict no-no. However, I am not sure whether this javascript is supported by older browsers, especially since this uses nodes to traverse the DOM.

Please advise. Any links/suggestions are welcome.

Thanks,

Astranomina

Top
Tags:
Wed, 2003-08-13 01:55
#1
astranomina
Offline
Last seen: 6 years 1 week ago
newbie
Joined: 2003-08-10
Posts: 3
Points: 0

Javascript CANNOT extract font-size values !

Hi all,

I have done some research on this for the past few days, and it seems that javascript CANNOT extract font sizes from an external stylesheet. This is really amazing, since I don't understand why the font size is singled out - I mean javascript CAN extract colors and other style elements.

So if you want to change font-sizes set in pixels - you will have to EXPLICITLY set them before attempting to change them. The code for the same goes somewhat like this:

var fontEqualized, noOfFontIncrements;

function changeFontSize(fontIncrease)
{
	var currentElement, currentFontSize, newFontSize;
	
	if ( !fontEqualized) 
	{
		fontEqualized = true;
		if (fontIncrease != '')
		{
			if (fontIncrease > 0)
			{
				// Change ALL the font sizes to a bigger font.
			}
			else
			{
				// Change ALL the font sizes to a smaller font
			}
		}
	}

	if (document.getElementsByTagName) 
	{
		tags = new Array ('div', 'p', 'a');

		for (j = 0; j < tags.length; j ++) 
		{
			var tagElements = document.getElementById('body').getElementsByTagName(tags[j]);
		
			for (i = 0; i < tagElements.length; i ++) 
			{
				currentElement = tagElements[i];
				currentFontSize = parseInt(currentElement.style.fontSize);
				newFontSize = currentFontSize + fontIncrease;
				currentElement.style.fontSize = newFontSize + 'px';
			}
		}
	}
}

I will also post a example page for the same soon.

Any comments on that ?

Astranomina

Top
  • Locked