Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы JavaScript

Урок 7. Работа со стилями через JS, сиблинги, вставка и перемещение элементов.


Работа со стилями через JavaScript

Работа со стилями в JavaScript осуществляется через объект style, если требуется напрямую переопределять значения свойств отдельных каскадных стилей. В случае, когда в CSS свойстве используется дефис, например background-color, в JS он заменяется на заглавную букву следующего слова и пишется слитно с предыдущим словом - backgroundColor:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>JS: работа со стилями</title>
		</head>
		<body>
			<ol>
				<li>Первый элемент</li>
				<li>Второй элемент</li>
				<li>Третий элемент</li>
				<li>Четвёртый элемент</li>
				<li>Пятый элемент</li>
			</ol>
			
			<script>
				var list = document.querySelectorAll("li");
				for (var i in list) {
					list[i].style.color = "#fff";
					list[i].style.backgroundColor = ["green", "red", "gold", "blue",
						"mediumseagreen"][i];
					list[i].textContent = "Элемент номер " + ++i;
				}
			</script>
			
		</body>
	</html>

Результат отображения:


В приведённом примере при работе цикла и переборе свойств объекта, для каждого из них выбирается отдельное свойство CSS background-color:
list[i].style.backgroundColor = ["green", "red", "gold", "blue", "mediumseagreen"][i]; - в первых квадратных скобках через запятую в кавычках указан цвет фона (это массив - о нём поговорим подробнее позже), а во вторых квадро-скобках - объект, свойства которого перебираются циклом for. Мы ещё рассмотрим это подробнее позже.

Упрощённый пример изменения фона элемента через JS будет выглядеть так:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>JS: работа со стилями</title>
		</head>
		<body>
			<p>Какой-то абзац</p>
			
			<script>
				var p = document.querySelector("p");
				p.style.backgroundColor = "gold";
			</script>
			
		</body>
	</html>

Результат отображения:


Сиблинги

Сиблинги в JS - это рядом стоящие потомки одного родителя. Пробелы и переносы строк в коде также считаются сиблингами.

Метод previousSibling - позволяет обратиться к предыдущему сиблингу, а метод nextSibling - обращение к следующему сиблингу. В следующем примере создано три строковых элемента, к среднему мы обращаемся по его id, а к двум соседним - при помощи методов previousSibling и nextSibling:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Сиблинги</title>
		</head>
		<body>
		
		<span id="sib1">Сиблинг 1</span><span
			id="sib2">Сиблинг 2</span><span id="sib3">Сиблинг 3</span>
			
			<script>
			/* Получаем средний элемент по id в переменную s2 */
				var s2 = document.querySelector('#sib2');
			
			/* Получаем доступ к предыдущему элементу (сиблингу)
			и меняем цвет его фона на красный */
			s2.previousSibling.style.backgroundColor = 'red';
			
			/* Меням цвет фона среднего элемента на "лайм" */
			s2.style.backgroundColor = "lime";
			
			/* Получаем доступ к следующему элементу (сиблингу)
			и меняем цвет его фона на золотой */
			s2.nextSibling.style.backgroundColor = 'gold';
			
			</script>
			
		
		</body>
	</html>

Результат:


Обратите внимание, что между завершением кода предыдущего и началом следующего элементов нет пробелов, переносов строк, табуляций и т.д., иначе обращение будет именно к этим пробелам, а не к нужным нам элементам.

Вставка и перемещение элементов

Вставка и перемещение элементов осуществляется с помощью метода insertBefore, его синтаксис таков: element.insertBefore("вставляемый_потомок", "существующий_потомок"):

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>JS: вставка и перемещение элементов</title>
		</head>
		<body>
		
		<div>
			<span id="sib1">Сиблинг 1</span><span
			id="sib2">Сиблинг 2</span><span id="sib3">Сиблинг 3</span>
		</div>
			
			<script>
			
			/* Получаем необходимые элементы в переменные */
				var s2 = document.querySelector("#sib2");
				var s3 = document.querySelector("#sib3");
				var div = document.querySelector("div");
			
			/* Меняем цвет 3-го span на "lime" */
				s3.style.backgroundColor = "lime";
			
			/* Втавляем span3 перед span2 (меняем их местами) */
				div.insertBefore(s3, s2);
			
			</script>
		
		</body>
	</html>

Результат отображения:


Кроме этого есть методы insertAdjacentHTML и innerHTML. Их синтаксис выглядит так:

insertAdjacentHTML

элемент.insertAdjacentHTML("где_вставить", "что_вставить");
вставляет содержимое, указанное в параметре "что_вставить" до или после открывающего или закрывающего тега указанного элемента (см. таблицу ниже).
Параметр "где_вставить" может принимать значения:

Значение Описание
"beforebegin" вставка перед открывающим тегом данного элемента
"afterbegin" вставка после открывающего тега данного элемента
"beforeend" вставка перед закрывающим тегом данного элемента
"afterend" вставка после закрывающего тега данного элемента

innerHTML

элемент.innerHTML = "что_вставить";
полностью заменяет указанный элемент на содержимое параметра "что_вставить" с интерпретацией html-тегов (см. пример ниже)

Если в параметре "что_вставить" будет прописан тег, то он будет интерпретирован именно как тег, в отличие от метода textContent, где теги выводятся как есть, без интерпретации:

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8">
			<title>Методы insertAdjacentHTML и innerHTML</title>
		</head>
		<body>
		
			<div>
				<span id="sp1">Строка 1</span>
				<span id="sp2">Строка 2</span>
				<span id="sp3">Строка 3</span>
			</div>
		
		<script>
			/* Записываем вставляемое содержимое в переменные для удобства */
			var ins1 = "<p>Какой-то абзац</p>";
			var ins2 = "<h2>Заголовок h2</h2>";
			
			/* Получаем необходимые элементы (div и второй span) в переменные */
			var div = document.querySelector("div");
			var span = document.querySelector("#sp2");
			
			/* Вставляем содержимое переменной ins1 перед открывающим
			тегом DIV методом insertAdjacentHTML */
			div.insertAdjacentHTML("beforebegin", ins1);
			
			/* Полностью заменяем код второго span методом innerHTML */
			span.innerHTML = ins2;
			
		</script>
		
		</body>
	</html>

Результат отображения:


Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля