Можно покрасить фон элемента в зависимости от его индекса в последовательности?

Question

Можно покрасить фон элемента в зависимости от его индекса в последовательности?

0

У меня есть div, и в div есть много элементов H3.

Для каждого элемента H3 (есть произвольная величина) фоновый цвет должен быть X-оттенками светлее H3 перед ним.

Я застрял на двух вещах.

1: Как я сделал бы это только с помощью CSS (возможно, можно было бы разработать хакерский способ сделать это в jQuery). 2: Как бы я увеличил/уменьшил цвет (для простоты предположим, что первый H3 будет черным и все остальные светлые оттенки серого).

Niet the Dark Absol 12 нояб. 2013, в 16:55

Источник

Теги:

html

css

styling

selector

1 ответ

Ещё вопросы

Niet the Dark Absol · Accepted Answer · 2013-11-12T13-37-00.000Z

К сожалению, нет никакого способа сделать что-то в 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)
    +")";
}