How to remove a border style under IE?

A

Armin Gajda

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
 
A

Armin Gajda

Armin said:
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 = '';">
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top