学习任务

   1.掌握属性操作的三种方法getAttribute()、setAttribute()、removeAttribute()

   2.制作四大名绣案例

观看视频

内容概要

    1.getAttribute()、setAttribute()、removeAttribute()只能用于元素节点

    2.案例“四大名绣”中，同学们思考一下：

      （1）如何获取超链接的href属性

      （2）如何改变img的src属性

      （3）return false有什么作用

素材下载

    四大名绣图片素材点击下载

课件下载

      四大名绣课件

参考代码

    1.HTML代码

       <h2>四大名绣</h2>

<ul>

    <li><a href="cixiu/suxiu.jpg" title="四大名绣-苏绣-古典插花" onclick="showPic(this);return false;">苏绣</a></li>

    <li><a href="cixiu/shuxiu.jpg" title="四大名绣-蜀绣-国宝熊猫" onclick="showPic(this);return false;">蜀绣</a></li>

    <li><a href="cixiu/yuexiu.jpg" title="四大名绣-粤绣-绣花鸟屏" onclick="showPic(this);return false;">粤绣</a></li>

    <li><a href="cixiu/xiangxiu.jpg" title="四大名绣-湘绣-松鹤延年" onclick="showPic(this);return false;">湘绣</a></li>

</ul>

<img src="cixiu/suxiu.jpg" alt="四大名绣" id="placeholder">

<h3 id='description'></h3>

    2.CSS代码

    <style type="text/css">

        body {

            font-family: "Helvetica", "Arial", "serif";

            color: #333;

            background-color: #ccc;

            margin: 0 10%;

            font-size: 1rem;

        }

        h2 {

            color: #333;

            background-color: transparent;

        }

        a {

            color: #c60;

            background-color: transparent;

            font-weight: bold;

            text-decoration: none;

        }

        ul {

            padding: 0;

        }

        li {

            list-style: none;

            width: 100px;

            display: inline-block;

        }

        img {

            width: 400px;

            height: 400px;

        }

        h3 {

            color: #c60;

        }

</style>