JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1

本文链接：https://blog.csdn.net/QinGP97/article/details/126390797

这篇博客介绍了如何利用JavaScript、CSS和HTML复刻世纪佳缘官网注册页面头部的用户名输入框及显示隐藏内容功能。在VScode中开发，并在Edge浏览器上测试。通过JS操作元素和事件，实现表单获取焦点和失去焦点时的样式变化，以及鼠标经过时背景图片的动态调整。涉及到的技能包括JS条件判断、元素操作和事件监听。

摘要由CSDN通过智能技术生成

需求：利用JS事件与操作元素复刻--世纪佳缘（用户名、显示隐藏内容）。

开发环境：VScode、Edge

参考网站：世纪佳缘官网注册截面头部

包含算法：

1、利用JS操作元素、事件以及if分支，修改表单获取焦点和失去焦点时的样式。

2、利用JS操作元素、事件以及循环的方法定位样式背景（其他登录），以及设置鼠标经过时变化背景图片的需求。

代码：

<!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>19-操作元素课后作业</title>
    <style>
        .header {
            margin: 0;
            /* background-color: pink; */
        }
        
        .nav {
            position: relative;
            margin: auto;
            width: 1030px;
            height: 70px;
            /* background-color: skyblue; */
        }
        
        .nav a,
        .pic1 {
            float: left;
        }
        
        .nav .id {
            position: absolute;
            top: 20px;
            left: 325px;
            width: 135px;
            height: 24px;
            border: 1px solid rgb(217, 217, 217);
            color: rgb(170, 170, 170);
            outline: none;
            text-indent: 8px;
        }
        
        .nav .pwd {
            position: absolute;
            top: 20px;
            left: 482px;
            width: 135px;
            height: 24px;
            border: 1px solid rgb(217, 217, 217);
            color: rgb(170, 170, 170);
            outline: none;
            text-indent: 8px;
        }
        /*变换后的样式一定要写在后面 */
        
        .nav .id_onfocus,
        .nav .pwd_onfocus {
            border: 1px solid rgb(255, 214, 219);
        }