Как сделать чтобы событие window.onload срабатывало в разных местах?
window.onload может сработать только в одном месте
чем можно его заменить чтобы срабатывало тогда когда встречается div id='box'? Возможно есть какой либо другой вариант обернуть каждый символ в отдельный background чтобы каждая буква была отдельно.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#box div{
padding: 3px;
background-color: #FF00FF;
border-radius: 50%;
width: 20px;
text-align: center; }
</style>
</head>
<body>
<div id='box' style='display: flex'>Требуется обернуть каждый символ в DIV</div>
<div id='box' style='display: flex'>А второй раз уже не срабатывает</div>
<script>
window.onload = function() {
var txt = box.textContent, html='';
for (var i=0; i<txt.length; i++) {html+='<div>' + txt[i] + '</div>'}
box.innerHTML = html;
}
</script>
</body>
</html>
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div id='box' style='display: flex'>Требуется обернуть каждый символ в DIV</div>
<div id='box' style='display: flex'>А второй раз уже не срабатывает</div>
<div id='box' style='display: flex'>Так сработает на каждом id=box</div>
<script>
window.onload = function() {
var arrBox = document.querySelectorAll('#box');
for (var i=0; i<arrBox.length; i++) {
var html='';
for(var k = 0; k < arrBox[i].innerHTML.split('').length; k++){
html+='<div>' + arrBox[i].innerHTML.split('')[k] + '</div>';
}
arrBox[i].innerHTML = html;
}
}
</script>
<style type="text/css">
#box div{
padding: 3px;
background-color: #FF00FF;
border-radius: 50%;
width: 20px;
text-align: center; }
</style>
</body>
</html>
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box{
display:flex;
}
.box div{
padding:3px;
border-radius:50%;
width:20px;
text-align:center;
}
.box div.n{
background-color:#FFE0FF;
}
.box div.f{
background-color:#FF00FF;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call(document.querySelectorAll(".box"), function(a) {
a.innerHTML = [].map.call(a.textContent, function(a) {
return "<div class="+(a == " "? "n" : "f")+">" + a + "</div>";
}).join("");
});
});
</script>
</head>
<body>
<div class='box' >Требуется обернуть каждый символ в DIV</div>
<div class='box' >А второй раз уже не срабатывает</div>
<div class='box' >Так сработает на каждом id=box</div>
</body>
</html>
|
crystaltrumpet,
id уникально, для однотипных элементов лучше использовать class |
Ронни в который раз восхищаюсь Вами как человеком. Сколько лет и вы стольким людям помогаете!
|
Войд! Большущее спасибо! Выручаете!
|
| Часовой пояс GMT +3, время: 18:20. |