textboxes.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title></title>
<style language="text/css">
@import url(standard.css);
</style>
<script language="javascript">
function changeStyle(on)
{
if (on) document.styleSheets[0].addImport('./editing.css');
else document.styleSheets[0].addImport('./standard.css');
}
</script>
</head>
<body>
<form name="theForm">
<p>This is a test:<br>
<input type="textbox" class="textBox" id="foo" onFocus="changeStyle(1);" onBlur="changeStyle(0);"></p>
</form>
</body>
</html>
If you run in IE you will see the change of style to the textbox style(onfocus and onblur). I can't get it right in Mozilla(1.1 Mac at the moment). Anyone got any ideas or is Moz just not up to changing style rules.
Please note I'm not looking for any:
onfocus="this.style.color='bla';"
or anything like that. I'm looking specifically for changing the stylesheet used in a document as done in IE above. I tried some DOM methods but they're not working right:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Style Changes</title>
<style language="text/css">
@import url(standard.css);
</style>
<script language="javascript">
function changeStyle(on) {
var x=document.styleSheets[0];
if (on==1) {
x.deleteRule(x.cssRules.length-1);
x.insertRule("@import url(editing.css);", x.cssRules.length);
}
else {
x.deleteRule(x.cssRules.length-1);
x.insertRule("@import url(standard.css);", x.cssRules.length);
}
}
</script>
</head>
<body>
<form name="theForm">
<p>This is a test:<br>
<input type="textbox" class="textBox" id="foo" onFocus="changeStyle(1);" onBlur="changeStyle(0);"><br>
<input type="button" value="Check" onclick="alert(document.styleSheets[0].cssRules[0].cssText)"></p>
</form>
</body>
</html>
I don't see anything immediately wrong with your DOM code:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet
My only suggestion at the moment without actually experimenting with the code is search BugZilla for any DOM2 CSS bugs. DOM2 CSS and Stylesheets is currently the spottiest Mozilla DOM2 implementation. (spotty as in some things work, others don't, as opposed to DOM2 Traversal, where a clearly defined 1/3 of the specs are not implemented).