By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,060 Members | 1,893 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,060 IT Pros & Developers. It's quick & easy.

How to remove a border style under IE?

P: n/a
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
Share this Question
Share on Google+
1 Reply


P: n/a
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.