JS文件:
function mouseAction() { var textInputs = document.getElementsByTagName("input"); var len = textInputs.length; var index = 0; var textInput; /* 也能用 for in 语句遍历 for (textInput in textInputs){ textInputs[textInput].onmouseover = functionName; } */ for( index = 0; index < len; index++ ) { textInput = textInputs[index]; if( textInput.getAttribute("type") == "text" ){ textInput.onmouseover = function (){ //也能用这种方式 this.style.backgroundColor = "red"; this.className = "txtMouseOver"; //要先在HTML中引入CSS文件 }; //注意要加分号
textInput.onmouseout = function(){ this.className = "txtMouseOut"; };
textInput.onfocus = function(){ this.className = "txtMouseFocus"; };
textInput.onblur = function(){ this.className = "txtMouseBlur"; }; } } }
//也可以直接跟一个函数名,不要加引号,括号 window.onload = mouseAction; window.onload = function(){ mouseAction(); };
CSS文件:
/*主体居中显示*/ body{ width: 80%; height: 800px; position: relative; margin-left: 10%; /*left: -40%;*/ border: #00CCFF solid thin; } .txtMouseOver { border-color: #9ecc00; } .txtMouseOut { border-color: #84a1bd; } .txtMouseFocus { border-color: #9ecc00; background-color: #e8f9ff; } .txtMouseBlur { border-color: #84a1bd; background-color: #ffffff; }
|