练习：操作DOM的属性

<body>

    <button id="btn1">显示图片</button>

    <button id="btn2">更换图片title</button>

    <button id="btn3">给图片添加address属性</button>

    <button id='btn4'>删除图片</button>

    <br>

    <img id="img" title="美丽的风景">

    <script>

        //获取图片标签

        let img = document.querySelector('#img')

        //获取按钮并添加点击事件

        document.querySelector('#btn1').onclick = function(){

            // 获取 或 设置 标签的原生属性，直接点

            img.src = 'https://img2.baidu.com/it/u=4265591365,617998863&fm=26&fmt=auto'

        }

        document.querySelector('#btn2').onclick = function(){

            img.title = '美丽的森林'

        }

        document.querySelector('#btn3').onclick = function(){

            // 获取属性的统一方法 getAttribute('属性名称')

            // 设置属性的统一方法 setAttribute('属性名称','属性值')

            img.setAttribute('address','地址在西班牙')

            // console.log(img.getAttribute('address'));

        }

        document.querySelector('#btn4').onclick = function() {

            img.remove()

            alert('图片已删除')

        }

    </script>

</body>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容