manipulating css using javascript and the base html statement

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/tmp/example-base.html
Without the base statement:
http://freebsdcluster.org/~casaschi/tmp/example-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...

You don't have a doctype, html tags, head tags, or body tags. To get consistent behavior, you'll need to use a doctype and build an appropriate document structure. Not sure if that will fix the problem, but it's where to start.

You don't have a doctype, html tags, head tags, or body tags. To get consistent behavior, you'll need to use a doctype and build an appropriate document structure. Not sure if that will fix the problem, but it's where to start.

Well... I amended the examples at the links:

http://freebsdcluster.org/~casaschi/tmp/example-base.html

http://freebsdcluster.org/~casaschi/tmp/example-nobase.html

Now they are tidy with doctype, html, head, body tags and so on.
Still the web browser don't seem as fuzzy about it as you are since the behavior is exactly the same.

What's next then?

Hi Casaschi,

My IE8 could pass this test, but not my Chrome5.0.375.99.
Chrome hasn't fully implemented DOM Core 2? I don't know.

Give <style> different id, e.g: myCSS,
and retrieve that using document.getElementById("myCSS").
And my Chrome finally pass the test.

Hendra

My IE8 could pass this test, but not my Chrome5.0.375.99.
Chrome hasn't fully implemented DOM Core 2? I don't know.

Give <style> different id, e.g: myCSS,
and retrieve that using document.getElementById("myCSS").
And my Chrome finally pass the test.


Not sure I understand your workaround, I'm already using an id to retrieve the style element, just changing the id value does not make a difference.
Could you please post the actual code that works for you, with the base statement in the html code?

Apologize I didn't rechecked my code, the <base> tag was still a comment.
You're right, renaming id won't bring any differences.

I've tested again http://freebsdcluster.org/~casaschi/tmp/example-base.html,
and it seems that Chrome always check domain / <base> first before "doing anything".

Since your CSS doesn't reside in www.google.com domain,
Chrome would give error. Try change base into <base href="#" />,
and probably your script shall do fine.

Hendra

Apologize I didn't rechecked my code, the <base> tag was still a comment.
You're right, renaming id won't bring any differences.

I've tested again http://freebsdcluster.org/~casaschi/tmp/example-base.html,
and it seems that Chrome always check domain / <base> first before "doing anything".

Since your CSS doesn't reside in www.google.com domain,
Chrome would give error. Try change base into <base href="#" />,
and probably your script shall do fine.

Hendra

Thanks, I got the same hint at the same time from somewhere else and it seems to fix the issue with Google Chrome.

However, it seems that even changing base to "#" still IE7 does not work.
Any hint how to get IE7 to work with the base statement?

Did your IE7 error console tell report any errors?

<base> statement didn't give any,
when your script ran on IE7 emulated mode in my IE8.

Did your IE7 error console tell report any errors?

<base> statement didn't give any,
when your script ran on IE7 emulated mode in my IE8.

No error message.
It just stops executing when accessing myObject.styleSheet.rules

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.

Came to sort of a conclusion on this one:

the ability to dynamically change css classes is not supported consistently across browsers, especially when a base statement is included. practically speaking, very challenging to use
an alternative solution was proposed to me: since I only need to change the css classes once at html file load (reading options from the URL search string), then it's possible to add a new stylesheet using the document.write("<style ... </style>") javascript function. This works with any browser and with/without the base html statement

I recommend jQuery. I learned in it a few days and it really is helpful for this kind of thing. With jQuery it would be easy to locate the html by id or class and with one line of code change the css to your liking. I know this isnt exactly the answer you're looking for, but thought I could promote it -- jQuery really does make this kind of thing easy.

http://api.jquery.com/css/