我有一个div,div里面有很多H3元素。
对于每个 H3 元素(有任意数量),背景颜色比它之前的 H3 浅 X 色度。
我坚持两件事。
1:我将如何单独使用 CSS 来完成此操作(可能会想出一种 hacky 方式在 jQuery 中完成此操作)。 2:我如何增加/减少颜色(为简单起见,假设第一个 H3 为黑色,其余所有浅灰色)。
最佳答案
不幸的是,没有办法在 CSS 中做这样的事情(你可能可以用 nth-of-type
做一些事情),但这只有在唯一的 <h3>
时才有效。页面上的元素在同一个父元素中,如果你提前知道会有多少,或者至少有多少 max)
但在 JavaScript 中实际上非常简单:
var h3s = document.getElementsByTagName('h3'), l = h3s.length, den = Math.max(l-1,1),
darkest = [0,0,0], lightest = [255,255,255], // R,G,B - adjust as needed
step = [
(lightest[0]-darkest[0])/den,
(lightest[1]-darkest[1])/den,
(lightest[2]-darkest[2])/den
], i;
for( i=0; i<l; i++) {
h3s[i].style.color = "rgb("
+Math.round(darkest[0]+step[0]*i)+","
+Math.round(darkest[1]+step[1]*i)+","
+Math.round(darkest[2]+step[2]*i)
+")";
}
关于html - 可以根据序列中的索引为元素的背景着色吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19933828/