Оглавление:
Видео: Уроки JavaScript | #16 - Изменение элементов с помощью DOM. 2025
В центре внимания CSS находится элемент HTML. CSS отвечает на вопрос о том, как тег
появляется для зрителя. Существует два метода работы с элементами HTML статически: как часть отдельного тега и внутри заголовка, который определяет стиль для всех тегов одного типа.
Ошибочно предположить, что все браузеры отображают CSS точно так же. Два браузера в одной системе с одной и той же операционной системой часто предлагают несколько разные презентации. Кроме того, ошибка заключается в том, что браузер будет обеспечивать постоянный внешний вид на всех поддерживаемых платформах.
Например, Firefox использует несколько разных дисплеев при использовании Mac OS X, Linux и Windows. Браузер также может показывать страницу по-разному, когда требуются ограничения устройства. Страница, отображаемая на экране смартфона, отличается от той же страницы, что и на ПК. Подумайте о том, что CSS является скорее ориентиром, чем абсолютным требованием.
Как работать с тегами HTML
Один из вариантов настройки тегов HTML на странице - захватить все теги определенного типа и отформатировать их как часть цикла. Вот что делает следующий пример.
function ChangeStyles () {// Измените стиль тега
. var Заголовок = документ. getElementsByTagName ("h1") для (var i = 0; i . var Para = document. getElementsByTagName ("р"); for (var i = 0; i
В этом случае в примере используется getElementsByTagName () для получения массива всех элементов определенного типа на странице. В этом примере на странице отображаются теги
и
. Когда у вас есть список этих элементов, вы можете форматировать каждый элемент по очереди, используя цикл for, как показано. В этом примере показан ряд общих задач форматирования, включая задание полей элементов.
Когда вы работаете с графическими дополнениями, такими как рамка, это помогает понять, где различные стили вписываются в изображение. Например, поле margin влияет на расстояние между краем экрана и границей, а padding влияет на расстояние между границей и содержимым, которое оно охватывает.
В этом примере вы должны заметить несколько особенностей. Свойство fontFamily может содержать имя семейства, например Arial, или общее имя, например serif. Размер шрифта может отображаться в пикселях (px) или ems (один em равен 16 px), среди других типов значений. Вы также можете использовать относительные меры для размера шрифта, такого как маленький.
Как работать с стилями заголовков
Большинство разработчиков используются для работы с тегом, который появляется в элементе страницы. JavaScript может конструировать тег для вас программно, как показано в следующем примере.
function ChangeStyles () {// Получить доступ к заголовку. Головка = документ. getElementsByTagName ("голова") [0]; // Создаем тег. StyleTag = документ. createElement ("стиль"); // Установите тип тега. StyleTag. type = "text / css"; // Создаем переменную для хранения информации о стиле. var Styles = "h1 {font-family: Arial; font-size: 45px;" + "font-weight: bold; цвет: зеленый; text-align: center;" + "margin-left: 20px; margin-right: 20px;" + "border: medium double green;}" + "p {font-family: serif; font-style: italic;" + "font-size: 1em; color: blue}"; // Добавьте стиль в тег. StyleTag. appendChild (document. createTextNode (стили)); // Добавить тег в заголовок. Глава. appendChild (StyleTag);}
Разница в этом примере заключается в том, что информация о форматировании отображается в теге, а не в каждом элементе отдельно. Чтобы этот пример работал, вы создаете содержимое тега как строку.
Затем приложение использует функцию createTextNode (), чтобы превратить строку в текстовый узел и вставляет ее как содержимое для тега StyleTag, используя appendChild (). Чтобы добавить тег к элементу, код вызывает функцию appendChild () второй раз.
Как работать с идентификаторами
Чтобы изменить внешний вид определенных тегов, вы должны работать с определенными идентификаторами, как показано в следующем примере.
function ChangeStyles () {// Изменить стиль тега
. var Заголовок = документ. getElementById ("Заголовок"); Заголовок. стиль. fontFamily = "Arial"; Заголовок. стиль. fontSize = "45px"; Заголовок. стиль. fontWeight = "полужирный"; Заголовок. стиль. color = "green"; Заголовок. стиль. textAlign = "center"; Заголовок. стиль. marginLeft = "20px"; Заголовок. стиль. marginRight = "20px"; Заголовок. стиль. border = "средний двойной зеленый"; // Измените стиль тега
. var Para = document. getElementById ("Пункт"); Para. стиль. fontFamily = "serif"; Para. стиль. fontStyle = "italic"; Para. стиль. fontSize = "1em"; Para. стиль. color = "blue";}
В этом случае только элементы с конкретными идентификаторами, предоставленными кодом функции getElementById (), изменяются по внешнему виду. Например, когда код вызывает документ. getElementById («Заголовок»), Заголовок получает ссылку на объект с идентификатором заголовка, а последующие изменения влияют только на этот конкретный объект. Результат аналогичен двум другим примерам, за исключением того, что второй абзац остается неизменным.
