Open ChenPt opened 6 years ago
今晚在写一个雪碧图的小demo，因为需要对每个i标签的background-position都设置一个值，而这个值是有规律的，为了写尽量少的代码，准备做点优化，一开始我就想到了nth-child这个选择器，然后再配合calc来动态计算，而nth-child其实只能选择序号为第几的子元素，而不能实现一个变量n然后根据n的不同来设置不同的样式，所以最后还是只能通过JS来实现需求。 querySelector可以使用复杂的CSS选择器，不过只能选择到一个DOM节点，如果需要选择多个节点的话，需要使用querySelectorAll方法，返回的是一个NodeList数组。再对这个数组进行遍历对每个元素的backgroud-position值。使用的是e.style.backgroundPosition = `0 ${idx* -24}px`来修改backgroundPosition属性 Demo->JSFiddle
background-position
nth-child
calc
NodeList
e.style.backgroundPosition = `0 ${idx* -24}px`
今晚在写一个雪碧图的小demo，因为需要对每个i标签的
background-position都设置一个值，而这个值是有规律的，为了写尽量少的代码，准备做点优化，一开始我就想到了nth-child这个选择器，然后再配合calc来动态计算，而nth-child其实只能选择序号为第几的子元素，而不能实现一个变量n然后根据n的不同来设置不同的样式，所以最后还是只能通过JS来实现需求。 querySelector可以使用复杂的CSS选择器，不过只能选择到一个DOM节点，如果需要选择多个节点的话，需要使用querySelectorAll方法，返回的是一个NodeList数组。再对这个数组进行遍历对每个元素的backgroud-position值。使用的是e.style.backgroundPosition = `0 ${idx* -24}px`来修改backgroundPosition属性 Demo->JSFiddle