学习任务

    1.完善模块一中空气质量等级查询案例 （操作元素内容）

    2.密码框的明文密文显示 （操作元素属性）

    3.页面换肤效果（操作元素样式）

观看视频

视频概要

     操作元素主要是指操作元素的内容、操作元素的属性、操作元素的样式

      1.操作元素的内容，主要是三个属性：innerHTML、innerText、textContent

       回顾倒计时案例，在这个案例中是如何改变页面显示时间的。

     2.操作元素的属性，例如图片的src属性、表单密码框的type属性

     3.操作元素的样式，例如元素的显示与隐藏、背景色的改变等

素材下载

      1. 明文密文图片素材

      2.页面换肤素材

课件下载

      《操作元素》课件

参考代码

1.明文密文参考代码(课件10-13页)

  课件中提供了两种javascript代码，第一种代码运行在edge浏览器有问题，改为第二种后运行正常。

2.页面换肤案例(操作元素样式)

    （1）css参考代码

    <style>

        * {

        margin: 0;

        padding: 0;

        }

        body {

            background: url(images/01.jpeg) no-repeat center top;

            background-size: cover;

        }

        ul,li {

            list-style: none;

        }

        .backs {

            overflow: hidden;

            margin: 10px auto 0;

            background-color: #fff;

            width: 410px;

            height:78px;

            display:flex;

            justify-content:space-around;

            align-items:center;

        }

        .backs li {

            cursor: pointer;

        }

        .backs img {

            width: 100px;

            height: 70px;

        }

   </style>

    （2）html和JavaScript参考代码