javascript - getComputedStyle会对dom元素的各个属性进行更新检查吗
本文介绍了javascript - getComputedStyle会对dom元素的各个属性进行更新检查吗的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在实现图片轮播的时候，加上了一句 window.getComputedStyle(ul, false)['left'];
效果就好了，可是没有用变量去保存，就只是单单执行了这句话，如果去掉的话，对元素left的修改就无效了。
求巨巨们解答。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* { margin: 0;padding: 0;}
.container { width: 375px; height: 140px; overflow: hidden; }
ul { list-style-type: none; position: relative; width: 7500px; height: 140px; left: -375px;}
.anima { transition: all 1s;}
li { width: 375px; height: 100%; float: left; display: inline-block; }
img { width: 100%; height: 100%;}
</style>
<script type="text/javascript">
window.onload = function () {
var animate = (function (offset) {
var index = 2;
var ul = document.querySelectorAll('ul')[0];
var liList = document.querySelectorAll('li');
var move = function (obj, width) {
var left = parseInt(window.getComputedStyle(obj, false)['left']);
obj.style.left = left + width + 'px';
}
return function () {
window.getComputedStyle(ul, false)['left']; // 这里，注释掉效果就错了
if (index == 5) {
index = 1;
ul.className = '';
ul.style.left = '-375px';
// ul.setAttribute('style','left:-375px');
setTimeout(function () {
animate();
}, 0);
}
else {
ul.className = 'anima';
move(ul, offset);
setTimeout(() => {
animate();
}, 1000);
}
index++;
}
})(-375);
setTimeout(() => {
animate();
}, 1000);
}
</script>
</head>
<body>
<div class="container">
<ul class="anima">
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484559844848&di=8e19e9093abaddb49aff0c85aba6e946&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg">
</li>
<!-- 图片列表多放了两张图片，列表的第一张是正常列表的最后一张，列表的最后一张是正常列表的第一张 -->
<li>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1484549759&di=f0caf19a1954708bef443ca548e3c2f0&src=http://img002.21cnimg.com/photos/album/20160326/m600/B920004B5414AE4C7D6F2BAB2966491E.jpeg">
</li>
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484559844849&di=e1d85e28674f88ae2b6258f04696b0ac&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Flvpics%2Fh%3D800%2Fsign%3D9931b79f1dd5ad6eb5f969eab1ca39a3%2Fa8773912b31bb051b3333f73307adab44aede052.jpg">
</li>
<li>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1484559844848&di=8e19e9093abaddb49aff0c85aba6e946&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F3b87e950352ac65c1b6a0042f9f2b21193138a97.jpg">
</li>
<li>
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1484549759&di=f0caf19a1954708bef443ca548e3c2f0&src=http://img002.21cnimg.com/photos/album/20160326/m600/B920004B5414AE4C7D6F2BAB2966491E.jpeg">
</li>
</ul>
</div>
</body>
</html>
解决方案
因为 window.getComputedStyle(ul, false)['left']; 会引起reflow，还有很多可以引起reflow的方式，只要加上都是可以的。
这篇关于javascript - getComputedStyle会对dom元素的各个属性进行更新检查吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
