DOM操作元素属性

最新推荐文章于 2023-02-22 07:16:04 发布

zhou_nj

最新推荐文章于 2023-02-22 07:16:04 发布

阅读量165

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/zhou_nj/article/details/120110839

版权

1.设置元素自身的属性，可以直接设置。

<!DOCTYPE html>
<html>
<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>操作属性</title>
</head>
<body>
    <img id="img" src="./L01/img/zhl.jpg" title="大家好！我是钟汉良">
    <button id="btn">切换图片</button>
    <script>
        // 获取图片
        let img = document.querySelector('#img')
        // 获取按钮
        let btn = document.querySelector('#btn')
        // 给按钮注册点击事件
        btn.onclick = function(){
            // 设置元素自身的属性，可以直接点
            img.src = './L01/img/cl.jpg'
            img.title = '大家好！我是C罗'
        }
    </script>
</body>
</html>

2.setAttribute()方法，设置自定义属性。该方法要传两个参数，第一参数是属性名，第二个参数是属性值。

<!DOCTYPE html>
<html>
<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>操作属性</title>
</head>
<body>
    <img id="img" src="./L01/img/zhl.jpg" title="大家好！我是钟汉良" name="钟汉良" age="47">
    <button id="btn">切换图片</button>
    <script>
        // 获取图片
        let img = document.querySelector('#img')
        // 获取按钮
        let btn = document.querySelector('#btn')
        img.setAttribute('name','C罗')
        img.setAttribute('age','36')
    </script>
</body>
</html>

3. getAttribute()方法，用于获取指定属性的值

<!DOCTYPE html>
<html>
<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>操作属性</title>
</head>
<body>
    <img id="img" src="./L01/img/zhl.jpg" title="大家好！我是钟汉良" name="钟汉良" age="47">
    <button id="btn">切换图片</button>
    <script>
        // 获取图片
        let img = document.querySelector('#img')
        // 获取按钮
        let btn = document.querySelector('#btn')
        console.log(img.getAttribute('age'));
            // 如果要获取的是标签自身的属性，可以直接点
        console.log(img.title);
    </script>
</body>
</html>

4.案例：轮播图效果的实现代码

<!DOCTYPE html>
<html>
<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>轮播图效果</title>
</head>
<body>
    <img id="img" src="">
    <script>
        // 获取图片对象
        let img = document.querySelector('#img')
        // 定义一个数组，保存轮播图的所有图片
        let urls = ["http://p1.music.126.net/3mnpEYIWB4DFH9Qy4Jsn0A==/109951166101130910.jpg?imageView&quality=89",
                    "http://p1.music.126.net/NkHoL6QsFCbwGebhyAC_HQ==/109951166101140399.jpg?imageView&quality=89",
                    "http://p1.music.126.net/F7FzEkzP-sRL926h3yLYVA==/109951166099774740.jpg?imageView&quality=89",
                    "http://p1.music.126.net/wRJ9Eh-MFNjaA_erXLfOOQ==/109951166101158045.jpg?imageView&quality=89",
                    "http://p1.music.126.net/fL68WeOQEFw-qZ35XZl9Zw==/109951166101159657.jpg?imageView&quality=89"]
        // 初始状态，显示第一张图片
        img.src = urls[0]
        // 定义显示图片地址的索引
        let i = 0
        // 通过定时器，每隔3秒钟切换一张图片
        setInterval(() => {
            //索引每次加1，如果长度等于数组的长度了，索引重新赋值为0
            if(++i===urls.length){
                i = 0
            }
            // 根据数组的索引，从数组中获取一张图片，给图片标签显示
            img.src = urls[i]
        }, 3000);
    </script>
</body>
</html>

zhou_nj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM操作元素属性

1.设置元素自身的属性，可以直接设置。<!DOCTYPE html><html><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"> <
复制链接

扫一扫