Question

我有一个验证码，如果输入文本为空白或onblur，我想将边框颜色更改为输入文本的RED。

在FF和Chrome中，它运行正常。在IE10中，它不起作用。

这是我的剧本

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();
    }
}

这是我的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>

有什么想法吗？

Answer 1

正如我的评论所述，您似乎将style 属性与style 属性混淆。

如果您想使用该属性，请尝试这样的事情......

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

Answer 2

DOM元素的style属性是一个包含不同样式属性值的对象。因此，如果要通过样式属性更改元素的边框和颜色，则需要执行以下操作：

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

如果要更改元素的样式属性，就像在示例中一样，您需要这样做：

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

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

2 个答案: