当前输入框高亮显示

输入框高亮

HTML

    
用户登录
    

        
        用户名:
        

        密码:
        
    
    登录

CSS

.container {
            width: 400px;
            margin:0 auto;
            background-color: rgb(254, 244, 235);
            border: 1px solid orangered;
        }
        h2 {
            //h2不应该设置width,一旦margin改变,h2就会超出父元素或留白
            //width: 392px;
            margin: 0;
            color: orangered;
            background-color: rgb(255, 235, 215);
            padding: 3px;
            border-bottom: 1px solid orangered;
        }
        .content {
            width: 220px;
            margin: 20px auto;
        }
        .f-origin {
            background-color: rgb(255,253,236);
            border-radius: 3px;
        }
        .login {
            width: 87px;
            background-color: orangered;
            padding: 5px 30px;
            border-radius: 3px;
            border: none;
            color: #ffffff;
            margin-bottom: 10px;
            text-align: center;
            margin-left: 132px;
        }
        .f-text {
            background-color: rgb(255,231,231);
        }

JS

window.onload = function () {
        var aInput = document.getElementsByTagName('input');
        for (var i=0; i

onfocus当元素获得焦点时触发
onblur当元素失去焦点时触发
className用于js中改变类名, 在之前的实例中使样式为默认样式就应该用这个,一直知道这个属性,竟然没想到

在其他人的代码中, 用户名,密码以及登录按钮的HTML都是这样

用户名

按钮也是这样,只是type不同, 没有值也写在里面, 设置label宽度, 所以按钮与输入框左对齐, 循环所有tagName为input的元素, 当按钮元素获得焦点时也可以改变按钮的背景色