JavaScript--Web APIs study notes (2) Operation element instance

Remarks: Style attribute operations

① element.style//inline style operation, suitable for situations with few styles and simple functions

② element.className //Class name style operation, suitable for situations with many styles or complex functions. In addition, className will directly change the class name of the element and overwrite the original class name. If you want to keep it, you can use multiple class name selectors

Modify the style style operation in JS, the generated style is inline, and the css weight is low

1. Click to display the password

enter password:

Click on the picture to display the password:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            position: relative;
            width: 400px;
            border-bottom:1px solid #ccc;
            margin:100px auto;
        }
        .box input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box img{
            width: 24px;
            position: absolute;
            top: 9px;
            right:2px;
            width:24px;
        }
    </style>

</head>
<body>
    <div class="box">
        <label for="">
            <img src="D:\image\img1.jpg" alt="" id="eye">
        </label>
        <input type="password" id="pwd">
    </div>
    <script>
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        var flag = 0;
        eye.onclick = function(){
            if(flag == 0){
                pwd.type ='text';
                eye.src = 'D:/image/img2.jpg'
                flag = 1;
            }else{
                pwd.type = 'password';
                eye.src = 'D:/image/img1.jpg'
                flag = 0;
            }

        }
        //按钮点多次不同状态的情况，用flag记录状态

    </script>
</body>
</html>

2. Example - display and hide the content of the text box

① If there is no input content, the light gray "recommended content" will be displayed;

②Enter text and display dark text

③Click other positions, the color becomes light gray

④ When there is no content, it will return to light gray "Recommended content"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="推荐的内容">
    <script>
        var text=document.querySelector('input');
        // 获得焦点事件
        text.onfocus = function(){
            console.log('得到了焦点');
            if(this.value === '推荐的内容'){
                this.value = '';
            }
            this.style.color = '#333';
        }
        text.onblur = function(){
            console.log('失去了焦点');
            if(this.value === ''){
                this.value = '推荐的内容';
            }
            this.style.color = '#999';
        }
        
    </script>
</body>
</html>

3. Example - password box verification information

The judgment event is that the form loses focus

If the input length is 6-18 digits, the length is judged to be appropriate, otherwise the length does not meet the requirements

Combined with the previous display password content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码框验证信息</title>
    <style>
        div{
            width: 600px;
            margin: 100px auto;
        }

        .message{
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(D:/image/img1.jpg) no-repeat right center;
            padding-left: 20px;
        }
        .wrong{
            color: red;
            background-image: url(D:/image/img2.jpg);
        }
        .right{
            color: green;
            background-image: url(D:/image/img3.jpg);
        }
        .register img{
            width: 24px;
             /* position: absolute;  */
            top: 9px;
            right:2px;
            width:24px;
        }
        .register input{
            width: 150px;
            height: 30px;
            border: 1px;
            outline: none;
            border-bottom:1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="register">
        <input type="password" class="ipt" name="" id="">
        <img src="D:\image\img1.jpg" alt="" id="eye">
        <p class="message">请输入6-16位密码</p>
    </div>
    <script>
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');

        ipt.onblur = function(){
            if(this.value.length<6 || this.value.length>18 ){
                console.log("错误");
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不满足要求';
            }
            else{
                message.className = 'message right';
                message.innerHTML = '您输入的密码满足位数要求'
            }
        }
        var eye = document.getElementById('eye');
        var message = document.querySelector('.message')
        var flag = 0;
        eye.onclick = function(){
            if(flag == 0){
                ipt.type ='text';
                eye.src = 'D:/image/img2.jpg'
                flag = 1;
            }else{
                ipt.type = 'password';
                eye.src = 'D:/image/img1.jpg'
                flag = 0;
            }
        }
    </script>
</body>
</html>