Отложенная загрузка CSS для определенного элемента на странице?
Подскажите, как сделать отложенную загрузку CSS стилей для определенного элемента на странице? И если это нужно сделать после выполнения определенного JS скрипта, например после нажатия кнопки, на элементе через 5 секунд появляются стили указанные в общем CSS файле.
Вот так например...
https://jsfiddle.net/51gj48sp/
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.st {
width: 50px;
height: 50px;
background-color: red ;
}
</style>
</head>
<body>
<button id="but">CSS</button>
<p id="countdown">Стиль загрузится через 10 секунд.</p>
<div id="div"></div>
<script>
but.onclick = function(){
let time = 10;
const timer = setInterval(() => {
const countdownElement = document.getElementById('countdown');
if(time > 0) {
countdownElement.textContent = `Стиль загрузится через ${time--} секунд.`;
} else {
clearInterval(timer);
countdownElement.textContent = '';
div.className = 'st';
}
}, 1000);
}
</script>
</body>
</html> const button = document.querySelector('button')
function handleAddStyles() {
setTimeout(() => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = 'styles.css' //путь к css файлу
document.head.appendChild(link)
}, 5000) //задержка 5 сек
}
button.addEventListener('click', handleAddStyles) 
Можно попробовать подключить ссылку на css файл через 5 секунд
<link rel="stylesheet" />
<button>Click me</button>
*Поставить скрипт в конец html*
<script>
function getCSS() {
setTimeout(
document.querySelector('link')
.setAttribute('href', 'адрес к css файлу'), 5000);
}
document.querySelector('button'). addEventListener('click', getCSS);
}
</script>
а в чем сложность? Средствами Javascript добавляешь атрибуты стиля тегам через необходимое время. Или вообще можно добавить блок style.
Дело в том что работает по типу колеса фортуны и при нажатии кнопки оно крутится ещё а ответ уже подсвечен, это сделано методом CSS
#roulette ul[data-number="1"]>:nth-child(1)>span{
animation-name: number-1;
А нужно подсветить сам элемент после остановки колеса, то есть через определенное количество секунд.
Понял спасибо большое!
на промисах это делается.. можно резолвить задержку как там: https://local-disc.firebaseapp.com/menu/articles/HashRouter.html#/blog
// Применяем подсветку после задержки (только для '/blog')
if (path === '#/blog') {
await new Promise(resolve => setTimeout(resolve, delay)); // Ожидание перед подсветкой
hljs.highlightAll(); // Подсветка для страницы blog
} else {
hljs.highlightAll(); // Подсветка для других страниц без задержки
} И зачем здесь этот промис? Колхозное нагромождение кода ради нагромождения. Обычного сеттаймаута с головой бы хватило.