Блог

Главная - Вопросы по программированию - получение значений CSS с течением времени

получение значений CSS с течением времени

#html #css #attributes

#HTML #css #атрибуты

Вопрос:

Я пытаюсь получить предыдущий и текущий цвет элемента и не могу понять, как это сделать. Любые предложения будут с благодарностью!

Комментарии:

1. Код выглядит так, как будто он используется для изменения случайного цвета заголовка каждый случайный раз при вызове функции changeHeadlineColor бесконечный цикл, но я не совсем понимаю ваш вопрос, зачем вам нужно получать предыдущий и текущий цвета, можете ли вы указать больше

Ответ №1:

Я не уверен, исходя из вопроса, требуется ли запоминать только текущий и предыдущие цвета или требуется запоминать их постоянно.

Предполагая, что это первый, этот фрагмент просто добавляет строку для сохранения текущего цвета в другом атрибуте данных, data-prev , перед обновлением его новым цветом. Мы могли бы, например, убедиться, что один и тот же цвет не выбирается дважды на этом этапе.

Фрагмент записывает предыдущий и текущий цвета в консоль, чтобы мы могли проверить, работает ли он.

 window.getRandomNumber = function (max) {
    return Math.floor(Math.random() * max)
}

var colors = ['red', 'blue', 'green', 'orange', 'purple'];
const changeHeadlineColor = function (croHeadline) {
    var random = getRandomNumber(5000);
    var randomString = random.toString();
    setTimeout(() => {
        var colorKey = (randomString.length < 4) ? 0 : parseInt(randomString.charAt(0));
        croHeadline.setAttribute('data-prev', croHeadline.getAttribute('data-color')); //remember the current color
        croHeadline.setAttribute('data-color', colors[colorKey]);
        console.log(croHeadline.getAttribute('data-prev')   ' '   croHeadline.getAttribute('data-color'));
        changeHeadlineColor(croHeadline);
    }, random);
};

changeHeadlineColor(document.querySelector('div')); 
     [data-color="red"] { color: red; }
    [data-color="blue"] { color: blue; }
    [data-color="green"] { color: green; }
    [data-color="orange"] { color: orange; }
    [data-color="purple"] { color: purple; } 
 <div data-color="red">SOME TEXT</div>

Метки: