Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    Surrey, UK
    Posts
    119
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Netscape DOM - inserting new stylesheet rules (Moz)

    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>

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    I don't see anything immediately wrong with your DOM code:
    http://www.w3.org/TR/2000/REC-DOM-Le...-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).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •