window.setInterval()方法的定义和用法及offsetLeft与style.left的区别-前端开发

一、window.setInterval()方法的定义和用法

一、window.setInterval()方法的定义和用法

window.setInterval()方法是JavaScript中的一个计时器函数，用于周期性地重复执行指定代码，间隔时间由用户自定义。它的语法如下：

window.setInterval(func, delay, arg1, arg2, ...)

参数说明：

func：周期性执行的代码块，可以是一个函数名或一个函数表达式。
delay：两次执行之间的间隔时间，单位是毫秒。如果省略，则默认为0。
arg1, arg2, ...：可选参数。传递给func函数的参数。

setInterval()方法会返回唯一包含该周期性执行的代码块的标识符，该标识符可作为后续取消该执行的依据。例如：

const timer = window.setInterval(function() {
  console.log('Hello, World!');
}, 1000);

clearInterval(timer); // 取消周期性执行

上述代码会每隔1秒执行一次console.log()。如果不需要周期性执行了，可以使用clearInterval()方法取消。

二、offsetLeft与style.left的区别

offsetLeft和style.left都是用于获取或设置元素的水平偏移位置的属性，但它们有以下几点区别：

offsetLeft：返回元素相对于其offsetParent元素的左边缘位置，以像素为单位。offsetParent是指离该元素最近的有定位的祖先元素。
style.left：返回元素相对于其包含块元素左侧的距离，以像素为单位。包含块是指浏览器计算该元素的位置时的参照元素。

示例一：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>offsetLeft与style.left示例</title>
  <style>
    #box {
      position: relative;
      left: 50px;
    }
  </style>
</head>
<body>
  <div id="box">Hello, World!</div>
  <script>
    const box = document.getElementById('box');
    console.log(box.offsetLeft); // 输出50
    console.log(box.style.left); // 输出50px
  </script>
</body>
</html>

上述代码中，#box元素设置了position:relative和left:50px，所以它的offsetLeft为50，style.left为"50px"。

示例二：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>offsetLeft与style.left示例</title>
  <style>
    #box {
      position: absolute;
      left: 50px;
    }
  </style>
</head>
<body>
  <div id="container" style="position:relative">
    <div id="box">Hello, World!</div>
  </div>
  <script>
    const box = document.getElementById('box');
    console.log(box.offsetLeft); // 输出50
    console.log(box.style.left); // 输出50px
  </script>
</body>
</html>

上述代码中，#box元素设置了position:absolute和left:50px，但它的包含块是#container元素，所以它的offsetLeft依然为50，style.left为"50px"。

基础教程推荐