前端基础（二十、控制DOM属性、定时函数)

最新推荐文章于 2024-04-08 09:58:02 发布

小鱼干儿er

最新推荐文章于 2024-04-08 09:58:02 发布

阅读量156

点赞数

分类专栏：前端学习文章标签： dom dom操作前端

本文链接：https://blog.csdn.net/qq_45689821/article/details/113822592

版权

前端学习专栏收录该内容

39 篇文章 2 订阅

订阅专栏

二十、控制DOM属性、定时函数

控制DOM属性
定时函数

控制DOM属性

我们通常使用 .setAttribute(" "," "); 修改DOM的属性，如：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img1{
            width: 300px;
            height: 300px;
        }
        .active{
            width: 100px;
            height: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <img src="" alt="" id="img1">
    <div id="div1">测试setAttribute</div>
    <script>
        var oImg = document.getElementById("img1");
        var oDiv = document.getElementById("div1");
        oImg.setAttribute("src","./image/cat1.jpg");
        oDiv.setAttribute("class","active");
    </script>
</body>

运行后显示：
测试setAttribute
由以上可以看到，setAttribute() 方法为 <img> 与 <div> 分别添加了属性 src 与 class 使这些DOM元素增添了属性。

定时函数

setInterval() ：以指定毫秒循环执行函数内的内容，直到 clearInterval() 清除
setTimeout()：以指定毫秒执行函数内的内容，只执行一次
clearInterval()：清除 setInterval()
clearTimeout()：清除 setTimeout()

    <script>
        setTimeout(function () {
            console.log("hello");
        }, 2000);

        var i = 0;
        var timer = setInterval(function () {
            console.log(i);
            i++;
            if (i == 5) {
                clearInterval(timer);
            }
        }, 1000);

    </script>

定时器

(๑′ᴗ‵๑)爱你❤

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.2.16

小鱼干儿er

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础（二十、控制DOM属性、定时函数)

二十、控制DOM属性、定时函数控制DOM属性定时函数控制DOM属性我们通常使用 .setAttribute(" "," "); 修改DOM的属性，如：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
复制链接

扫一扫

专栏目录