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

最新推荐文章于 2022-12-27 15:15:57 发布

QinGP97

最新推荐文章于 2022-12-27 15:15:57 发布

阅读量2.1k

点赞数

分类专栏： JavaScript HTML5 文章标签： javascript css html

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

版权

需求：利用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);
        }

最低0.47元/天解锁文章

QinGP97

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1

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

扫一扫

专栏目录