Изменить цвет фона списка циклом!!
На странице находится список ul с семью цветами, написанными на английском языке. Нужно чтобы в цикле alert поочередно выводил внутреннее содержимое каждого пункта li, и сразу после этого этот текущий пункт зарисовался тем цветом, который в нем записан.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>red</li>
<li>green</li>
<li>yellow</li>
<li>coral</li>
<li>gray</li>
<li>violet</li>
</ul>
<script src="./script.js"></script>
</body>
</html>
let liArr = document.getElementsByTagName('li');
//console.log(liArr[2].innerText);
for(let i = 0; i<= liArr.length; i++){
liArr[i].style.backgroundColor = liArr[i].innerText;
alert(liArr[i].innerText);
}
|
В хроме трюк не получится, у него баг(ФИЧА!!!111) с отрисовкой при alert.
|
Цитата:
Цитата:
|
Andriy_co2020k29z8d23,
Цитата:
|
Цитата:
|
Цитата:
Цитата:
Цитата:
Цитата:
Andriy_co2020k29z8d23, alert является «блокирующей скрипты» функцией, т. е. если вы хотите увидеть применение стилей, вам следует «немного» подождать!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li>red</li>
<li>green</li>
<li>yellow</li>
<li>coral</li>
<li>gray</li>
<li>violet</li>
</ul>
<script>
async function pseudoAsyncAlert(text) {
await new Promise(resolve => {
setTimeout(() => {
alert(text);
resolve();
}, 50);
});
}
async function main() {
for (const item of document.getElementsByTagName("li")) {
item.style.backgroundColor = item.textContent;
await pseudoAsyncAlert(item.textContent);
}
}
document.addEventListener("DOMContentLoaded", main);
</script>
</body>
</html>
Цитата:
|
dialog color async
Andriy_co2020k29z8d23,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Stoke&display=swap');
dialog {
padding: .5em;
border-radius: 0.6rem;
box-shadow: 0 0 1em black;
width: 150px;
height: 35px;
display: grid;
place-content: center;
font: 900 1.8em / 24px "Stoke", sans-serif;
}
</style>
</head>
<body>
<ul>
<li>red</li>
<li>green</li>
<li>yellow</li>
<li>coral</li>
<li>gray</li>
<li>violet</li>
</ul>
<script>
let liArr = document.getElementsByTagName('li');
async function bg(list) {
let modal = document.createElement('dialog');
document.body.append(modal);
dialogPolyfill.registerDialog(modal);
for (const li of list)
await new Promise(resolve => {
const {textContent : color} = li;
li.style.backgroundColor = modal.textContent = modal.style.color = color;
modal.addEventListener('click', () => {modal.close();resolve()}, {once: true});
modal.showModal();
});
modal.remove()
}
bg(liArr)
</script>
</body>
</html>
|
рони, это просто потрясающее применение Promise и <dialog>! Вы гений!
|
Malleys,
можно ли dialog запустить в Firefox без полифилла, или пока рано? |
:write:
упрощённая версия (работает и в Firefox)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Stoke&display=swap');
dialog {
padding: .5em;
border-radius: 0.6rem;
box-shadow: 0 0 1em black;
width: 150px;
height: 35px;
display: grid;
place-content: center;
font: 900 1.8em / 24px "Stoke", sans-serif;
}
</style>
</head>
<body>
<ul>
<li>red</li>
<li>green</li>
<li>yellow</li>
<li>coral</li>
<li>gray</li>
<li>violet</li>
</ul>
<script>
let liArr = document.getElementsByTagName('li');
async function bg(list) {
let modal = document.createElement('dialog');
document.body.append(modal);
modal.setAttribute('open','open');
for (const li of list)
await new Promise(resolve => {
const {textContent : color} = li;
li.style.backgroundColor = modal.textContent = modal.style.color = color;
modal.addEventListener('click', resolve, {once: true});
});
modal.remove()
}
bg(liArr)
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 16:55. |