Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.12.2017, 03:17
Аспирант
Отправить личное сообщение для crystaltrumpet Посмотреть профиль Найти все сообщения от crystaltrumpet
 
Регистрация: 28.06.2017
Сообщений: 42

Как сделать чтобы событие 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>

Последний раз редактировалось crystaltrumpet, 12.12.2017 в 03:25.
Ответить с цитированием
  #2 (permalink)  
Старый 12.12.2017, 08:06
Аватар для void()
Профессор
Отправить личное сообщение для void() Посмотреть профиль Найти все сообщения от void()
 
Регистрация: 11.08.2017
Сообщений: 208

<!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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.12.2017, 12:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 12.12.2017, 12:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

crystaltrumpet,
id уникально, для однотипных элементов лучше использовать class
Ответить с цитированием
  #5 (permalink)  
Старый 12.12.2017, 23:26
Аспирант
Отправить личное сообщение для crystaltrumpet Посмотреть профиль Найти все сообщения от crystaltrumpet
 
Регистрация: 28.06.2017
Сообщений: 42

Ронни в который раз восхищаюсь Вами как человеком. Сколько лет и вы стольким людям помогаете!
Ответить с цитированием
  #6 (permalink)  
Старый 12.12.2017, 23:27
Аспирант
Отправить личное сообщение для crystaltrumpet Посмотреть профиль Найти все сообщения от crystaltrumpet
 
Регистрация: 28.06.2017
Сообщений: 42

Войд! Большущее спасибо! Выручаете!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать, чтобы при вводе числа в поле добавлялись разделители групп разрядов? Hurray Элементы интерфейса 13 18.02.2015 14:07
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
как сделать так чтобы в popup окне принимался css стили,? sarik Общие вопросы Javascript 2 12.03.2013 10:24
Как сделать так чтобы показывалось загрузка картинки sarik Общие вопросы Javascript 15 18.02.2013 11:27
Как сделать чтобы менялся background в раскрывающемся меню Teotim Элементы интерфейса 2 20.10.2012 20:28