ahosang
09-10-2002, 02:19 AM
Here are some simple files:
standard.css:
.textBox
{
padding : 2px;
margin : 1px;
background-color: #F5F5F5;
border : 1px solid #B5B5B5;
}
editing.css:
.textBox
{
padding: 2px;
margin: 1px;
background-color: #FFFFFF;
border: 2px inset #B5B5B5;
}
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>
standard.css:
.textBox
{
padding : 2px;
margin : 1px;
background-color: #F5F5F5;
border : 1px solid #B5B5B5;
}
editing.css:
.textBox
{
padding: 2px;
margin: 1px;
background-color: #FFFFFF;
border: 2px inset #B5B5B5;
}
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>