原生 JS 实现进度条加载

太过爱你忘了你带给我的痛 2023-07-18 09:44 1阅读 0赞

### 1.获取节点的样式 ###

*  ###### 通过元素.style.样式只能获取到内联样式的值，就是style写在元素里面的值，不能获取嵌入式和外联样式的值 ######

var content = document.querySelector('.content');
    var demo = content.style.width

*  ###### 元素.currentStyle.样式名 读取当前元素正在显示的样式 ######

var content = document.querySelector('.content');
    var demo = content.currentStyle.width

*  ###### getComputedStyle()这个方法来获取当前元素的样式 ######

var content = document.querySelector('.content');
    var demo = getComputedStyle(content).width

##### 通过currentStyle和getComputedStyle（）读取到的样式都是只读的，不能修改，如果要修改必须通过 style 属性。 #####

### 2.进度条代码 ###

###### 比较简单的 demo ######

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .content { 
          height: 20px;
          background-image: linear-gradient(to right, #89f7fe, #66a6ff);
          border-radius: 10px;
        }
      </style>
    </head>
    
    <body>
      <div class="pb">安装开始</div>
      <div id="jd">
        <div class="content" style="width: 10px;"></div>
      </div>
      <script>
        let content = document.querySelector('.content');
    
        window.addEventListener('load', function (event) { 
          var timer = setInterval(function () { 
            if (content.style.width === 200 + 'px') { 
              clearInterval(timer)
            }
            content.style.width = parseInt(content.style.width) + 10 + 'px'
          }, 100)
        });
      </script>
    </body>
    
    </html>