470,635 Members | 2,062 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,635 developers. It's quick & easy.

How to remove a border style under IE?

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
Dec 8 '06 #1
1 15063
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
Dec 8 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

5 posts views Thread by JohnSouth | last post: by
9 posts views Thread by Ken | last post: by
4 posts views Thread by Chicagoboy27 | last post: by
21 posts views Thread by Russell Hoover | last post: by
1 post views Thread by Korara | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.