manipulating css using javascript and the base html statement

[casaschi]

Hello,

I came across a very odd browser behavior when trying to modify a css class using javascript and at the same time having a base html statement in my html file.

Without the base html statement, all browsers work fine and I can change the css class definition using javascript easily.
With a base html statement, only FireFox still works while Internet Explorer and Google Chrome dont work anymore. If there is a cross-domain issue, while one browser does work and the others dont?

An example of what I'm talking about, with the base statement:
http://freebsdcluster.org/~casaschi/...mple-base.html
Without the base statement:
http://freebsdcluster.org/~casaschi/...le-nobase.html

Any idea how to tweak the code in the case with the base html statement in order for the javascript to work with all browser (modifying the class definition) ???

Keep in mind, I dont want a suggestion of another way to change the color, this is only an example. I want to be able to manipulare css classes with javascript when a base html statement is in my html code.

This is essentially the code:

<!--
-->
<base href='http://www.google.com'>

<style id='myStyle' type='text/css'>

.myStyle {
  color: red;
}

</style>

<script type="text/javascript">

var lastColor = 'red';
function toggleColor() {
  lastColor = lastColor == 'red' ? 'green' : 'red';
  myObject = document.getElementById('myStyle');
  if (myObject.sheet) { myObject.sheet.cssRules[0].style.color = lastColor; } // Mozilla style
  if (myObject.styleSheet) { myObject.styleSheet.rules[0].style.color = lastColor; } // IE style
}

</script>

<a href="javascript: toggleColor();"><span class=myStyle>click here to toggle color</span></a>

Thanks in advance...

[jscheuer1]

IE 8, in both IE 8 mode and IE 7 mode, it works fine with both pages here. Chrome does not, as you say, failing on the page with the base tag.

However, this is not the way these things are done.

What one generally does is to change the scripted .style.color property of the element itself, ex:

document.getElementsByTagName('div')[0].style.color = 'red';

Or collectively change/toggle the class name of all the elements. This approach (though there are other variations) generally requires having two identical classes defined, except for the color or whatever thing(s) you want to change with the class change. The jQuery library has easier and more precise methods available for this. But in plain javascript, one can do:

var els = document.getElementsByTagName('*'), i = els.length - 1;
for (i; i > -1; --i){
	if(els[i].className === 'oneclass'){
		els[i].className = 'theotherclass';
	} else if(els[i].className === 'theotherclass') {
		els[i].className = 'oneclass';
	}
}

With additional coding and/or a slightly different approach in defining the two classes' rules, one can be more precise in plain javascript as well.

[casaschi]

However, this is not the way these things are done.

You are missing the point.

The code I posted is just a very basic example to point to the issue.
As part of a more complex context, it would be very beneficial to me to change dynamically the definition of a class, rather than reassigning all elements to another class.

Regardless of other ways to skin this cat, it appears that the code I posted is a valid javascript code that is executed significantly different by different browsers... does anyone know which browser behaves correctly (i.e. is the operation legal as assumed by FF or somehow forbidden as assumed by GC)?

In other words, either there is something intrinsically wrong with my code (and saying that things should be done differently is not enough to me) or something is wrong with some browser... but which is which?

[jscheuer1]

I don't think I missed the point. However, you are entitled to your opinion.

As a partial answer to your (what seems to me to be a) new question, I do know that security on GC is tighter for some things than in other browsers. This could account for its behavior here. And/or it could be a bug*.

My point is that there are perfectly good ways to accomplish your aims that probably will not suffer from these issues, and that at the same time are cross browser without having to resort to two different approaches.

If you wish to cling to altering style blocks, something I've never seen used for this. Feel free. It may be able to be worked out. I doubt it though I could be wrong.

At the same time, I believe that however complex your intentions are, they can be achieved by more established methods.



*Based upon observations in this thread:

http://www.dynamicdrive.com/forums/s...504#post230504

[casaschi]

I don't think I missed the point. However, you are entitled to your opinion.

Well, you are missing the point. In fact, copied verbatim from my initial post, this is the point you are missing:

Keep in mind, I dont want a suggestion of another way to change the color, this is only an example. I want to be able to manipulare css classes with javascript when a base html statement is in my html code.

[jscheuer1]

And I gave you a way to manipulate css classes . . .

Just not the way you apparently want.

Have a nice day.

[casaschi]

And I gave you a way to manipulate css classes . . .

Just not the way you apparently want.

this definitely confirms that you are missing the point of my initial request completely

[jscheuer1]

Not in my opinion. But I'm tired of arguing that point. Here's a workaround (may need further tweaking):

function toggleColor() {
  lastColor = lastColor == 'red' ? 'green' : 'red'; 
  myObject = document.getElementById('myStyle');
  if (myObject.sheet) { // Mozilla style w/kludge to overcome base href in browsers that cannot read cssRules (Chrome, Safari, perhaps others)
  	var base = document.getElementsByTagName('base'), baseHref;
  	if(base.length && !myObject.sheet.cssRules){
  		baseHref = base[base.length - 1].href;
  		base[base.length - 1].href = '#';
  	}
  	myObject.sheet.cssRules[0].style.color = lastColor;
  	if(base.length && typeof baseHref !== 'undefined'){
  		base[base.length - 1].href = baseHref;
  	}
  }
  if (myObject.styleSheet) { myObject.styleSheet.rules[0].style.color = lastColor; } // IE style
}

However, the base tag can present other problems. Try it in Firefox with:

<base target="_blank">

What fun!

That can be fixed by avoiding firing of this:

<a href="javascript: toggleColor();" . . .

like so:

<a href="javascript: toggleColor();" onclick="toggleColor(); return false;">

Yeah it needed tweaking:

function toggleColor() {
  lastColor = lastColor == 'red' ? 'green' : 'red'; 
  myObject = document.getElementById('myStyle');
  if (myObject.sheet) { // Mozilla style w/kludge to overcome base href in browsers that cannot read cssRules (Chrome, Safari, perhaps others)
  	var base = document.getElementsByTagName('base'), baseHref;
  	if(base.length && !myObject.sheet.cssRules){
  		for (var i = base.length - 1; i > -1; --i){
  			if(base[i].href){
	  			baseHref = [i, base[i].href];
	  			base[i].href = '#';
	  			break;
  			}
  		}
  	}
  	myObject.sheet.cssRules[0].style.color = lastColor;
  	if(baseHref){
  		base[baseHref[0]].href = baseHref[1];
  	}
  }
  if (myObject.styleSheet) { myObject.styleSheet.rules[0].style.color = lastColor; } // IE style
}

[casaschi]

Here's a workaround (may need further tweaking)

The idea of temporarily resetting base.href might actually work.

Thanks for the suggestion!

[jscheuer1]

Oh, it works alright. The second version is to be preferred in case of something like so (and other variations, technically invalid, but can be done):

<base href='http://www.google.com'>
<base target="_blank">

where it is essential to get the correct base tag.

I still think that your objectives can be achieved via more established methods. If you would be willing to use the jQuery script library, this could perhaps be easier and more precise perhaps than what you are trying here.

With it you can target an entire class of elements like so:

$('.someclass').css({color: 'red', backgroundColor: '#fff'});

You can include as many css property/value pairs as you like. They can even be determined on the fly by variable assignments. Here's your example translated (base will have no effect upon it):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>

.myStyle {
  color: red;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	var ms = $('.myStyle');
	$('#toggler').toggle(function(){ms.css({color: 'green'});}, function(){ms.css({color: 'red'});}).click(
	function(e){e.preventDefault();});
});
</script>
</head>
<body>

<a id="toggler" href="javascript: toggleColor();"><span class=myStyle>click here to toggle color</span></a>

</body>
</html>