CSS不适用于IE-边框样式更改

Question

I have a validation code where I want to change the border color to RED of my input text if the input text is blank or onblur.

In FF and Chrome, it works fine. In IE10, it doesn't work.

Here's my script

function onblur_style() {
var x = document.forms["myform"]["MySearchKeywordInput"].value;
    if (x != "" || x != null) {
        document.getElementById("MySearchBox").style="border: 2px solid #5A5A5A;color: red";
    } 
}

function validateForm() {
var y = document.forms["myform"]["MySearchKeywordInput"].value;
    if (y==null || y=="") {        
        alert("At least one search query is required.");
        document.getElementById("MySearchBox").style="border: 2px solid #FF0000;color: red";
        return false;
    } else {
        document.forms["myform"].submit();
    }
}

Here's my html

<form id="myform" method="get" action="http://submitpage.page" onsubmit="return validateForm()">
<table>
<tr>
<td>
<input type="text" id="MySearchBox" name="MySearchKeywordInput" maxlength="60" size="180" value="Search for solutions" onfocus="if (this.value==this.defaultValue)this.value='';" onblur="onblur_style()">
</td>
<td>
<input type="image" src="http://image/magnifying_glass.gif">
</td>
</tr>
</table>

Any idea?

Answer 1

As mentioned in my comment, you seem to be confusing the style property with the style attribute .

If you want to use the property, try something like this...

var searchBoxStyle = document.getElementById("MySearchBox").style;
searchBoxStyle.border = '2px solid #5A5A5A';
searchBoxStyle.color = 'red';

Answer 2

The style property of DOM elements is an object that holds values for different style properties. Thus if you want to change the border and color of an element through the style property then you need to do this:

element.style.border = "2px solid #5A5A5A";
element.style.color = "#FF3030";

If you want to change the style attribute of the element like in your example you need to do this:

element.setAttribute("style", "border: 2px solid #5A5A5A; color: red");