精靈圖主要通過lis[i].style.backgroundPosition = “0 -”+ i*44 + “px”;截取需要的圖標。
第一個參數0，是left，第二個參數是top，所以是負的
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 250px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(images/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script>
// 1. 獲取元素 所有的小li
let lis = document.querySelectorAll('li');
for(let i=0; i<lis.length; i++){
lis[i].style.backgroundPosition = "0 -"+ i*44 + "px";
}
</script>
</body>