How to remove a border style under IE?

Discussion in 'Javascript' started by Armin Gajda, Dec 8, 2006.

  1. Armin Gajda

    Armin Gajda Guest

    Hi,

    I have the following problem:

    An input field get a border assigned by a style class (e.g. 2px solid red).
    When the field gets the focus, we set the border to green.

    element.style.border = "2px solid green";

    When the field looses the focus, the border should change back to red.
    We just want to remove the style we have set, when the field has got the
    focus, so that the style class is visible again.

    element.style.border = "";

    Under Firefox that works but not under IE.
    We have changed to the class mode, because we don't want to save the
    previous setting and restore it later.

    Is there a possibility to remove the style (especially the border style)
    under IE, so that the style of the assigned class is visible again?

    element.style.removeAttribute doesn't seem to work, but may be I make
    something wrong?

    Here is a little sample, that works under Firefox, but not under IE.

    Can someone help me?

    <html>
    <head>
    <title>
    Testformular 1
    </title>
    <script>

    function set() {
    var element = document.getElementById('e1');
    element.style.border="2px solid green";
    }


    function remove() {
    var element = document.getElementById('e1');
    // element.style.removeAttribute("border");
    element.style.border="";
    }

    </script>
    </head>
    <body>
    <style>
    .myClass {
    background-color:blue;
    border:2px solid red;
    }
    </style>
    <form>
    <input class="myClass" id="e1" type="text" style="width:200px;" value=""
    onfocus="javascript:focus(this)"/>
    <br>
    <br>
    <input type="button" value="setStyle" onClick="javascript:set()"/>
    <input type="button" value="removeStyle" onClick="javascript:remove()"/>
    </form>
    </body>
    </html>

    bye Armin
     
    Armin Gajda, Dec 8, 2006
    #1
    1. Advertising

  2. Armin Gajda

    Armin Gajda Guest

    Armin Gajda schrieb:
    > Hi,
    >
    > I have the following problem:
    >
    > An input field get a border assigned by a style class (e.g. 2px solid red).
    > When the field gets the focus, we set the border to green.
    >
    > element.style.border = "2px solid green";
    >
    > When the field looses the focus, the border should change back to red.
    > We just want to remove the style we have set, when the field has got the
    > focus, so that the style class is visible again.
    >
    > element.style.border = "";
    >
    > Under Firefox that works but not under IE.
    > We have changed to the class mode, because we don't want to save the
    > previous setting and restore it later.
    >
    > Is there a possibility to remove the style (especially the border style)
    > under IE, so that the style of the assigned class is visible again?
    >
    > element.style.removeAttribute doesn't seem to work, but may be I make
    > something wrong?
    >
    > Here is a little sample, that works under Firefox, but not under IE.
    >
    > Can someone help me?
    >
    > <html>
    > <head>
    > <title>
    > Testformular 1
    > </title>
    > <script>
    >
    > function set() {
    > var element = document.getElementById('e1');
    > element.style.border="2px solid green";
    > }
    >
    >
    > function remove() {
    > var element = document.getElementById('e1');
    > // element.style.removeAttribute("border");
    > element.style.border="";
    > }
    >
    > </script>
    > </head>
    > <body>
    > <style>
    > .myClass {
    > background-color:blue;
    > border:2px solid red;
    > }
    > </style>
    > <form>
    > <input class="myClass" id="e1" type="text" style="width:200px;" value=""
    > onfocus="javascript:focus(this)"/>
    > <br>
    > <br>
    > <input type="button" value="setStyle" onClick="javascript:set()"/>
    > <input type="button" value="removeStyle" onClick="javascript:remove()"/>
    > </form>
    > </body>
    > </html>
    >
    > bye Armin


    The solution was:

    <input type="text" class="class1"
    onfocus="this.style.border = '2px solid red';"
    onblur="this.style.borderColor = this.style.borderWidth =
    this.style.borderStyle = '';">

    --
    bye Armin
     
    Armin Gajda, Dec 8, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,264
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,354
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    702
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,535
    Adrienne Boswell
    Jul 30, 2006
  5. Ken Varn
    Replies:
    0
    Views:
    472
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page