1.获取节点的样式
-
通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值
<div class="content" style="width: 60px;"></div>
var content = document.querySelector('.content');
var demo = content.style.width
-
元素.currentStyle.样式名 读取当前元素正在显示的样式
<div class="content" style="width: 60px;"></div>
var content = document.querySelector('.content');
var demo = content.currentStyle.width
-
getComputedStyle()这个方法来获取当前元素的样式
<div class="content" style="width: 60px;"></div>
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>