Отложенная загрузка CSS для определенного элемента на странице?

Подскажите, как сделать отложенную загрузку CSS стилей для определенного элемента на странице? И если это нужно сделать после выполнения определенного JS скрипта, например после нажатия кнопки, на элементе через 5 секунд появляются стили указанные в общем CSS файле.

По дате

По рейтингу

celtic_hammer

Новичок

3мес

Вот так например...
https://jsfiddle.net/51gj48sp/

12345678910111213141516171819202122232425262728293031323334

 <!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>

user_280028013

Гуру

3мес

123456789101112

 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)

c_a_t_t_u_s

Просветленный

3мес

Можно попробовать подключить ссылку на 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>

partner_wwwa77rru

Мудрец

3мес

а в чем сложность? Средствами Javascript добавляешь атрибуты стиля тегам через необходимое время. Или вообще можно добавить блок style.

z9xsvoipgjphzyl

Искусственный Интеллект

3мес

на промисах это делается.. можно резолвить задержку как там: https://local-disc.firebaseapp.com/menu/articles/HashRouter.html#/blog

1234567

             // Применяем подсветку после задержки (только для '/blog') 
if (path === '#/blog') { 
    await new Promise(resolve => setTimeout(resolve, delay)); // Ожидание перед подсветкой 
    hljs.highlightAll();  // Подсветка для страницы blog 
} else { 
    hljs.highlightAll();  // Подсветка для других страниц без задержки 
}