Изменение тегов с помощью JavaScript

26 июня 2020 - Администратор

Изменение тегов с помощью JavaScript

В этой статье мы разберём, как с помощью JS изменять значения атрибутов тегов, научимся с помощью JavaScript изменять размер текста, цвет фона на  HTML странице
Изменение размера текста на HTML странице с помощью JS
К каждому элементу на HTML странице можно ввести свой идентификатор, с помощью которого можно работать с этим элементом в JavaScript.
Пример задания идентификатора для элемента тега <p> на HTML странице
<p id="name">Текст </p>
Чтобы получить элемент в JavaScript и работать с ним, необходимо использовать команду
let переменная элемента = document.getElementById(идентификатор элемента);
Пример получения элемента в JS
let element = document.getElementById(elem);
Чтобы изменить свойства полученного элемента, необходимо заданной переменной элемента добавить точку и имя свойства
Пример изменения свойства элемента в JS
element.style.fontSize = (30) + 'px';
Опишем пример изменения размера текста с помощью JavaScript
Введём две кнопки "Уменьшить размер шрифта" и "Увеличить размер шрифта" и подключим обработчиков нажатия кнопки. Подробнее об обработка нажатия кнопки в JS
<p><button onclick="Fontplus('text');">Увеличить размер шрифта</button></p> 
<p><button  onclick="Fontminus('text');">Уменьшить размер шрифта</button></p>

Введём элемент <p>, который выводит текст itrobo.ru и назначим ему свой идентификатор
<p id="text" background="#FF0000" style="font-size:14px;">
itrobo.ru
</p>

В обработчике событий получаем элемент и меняем его свойства
function Fontplus(elem)
{
let element = document.getElementById(elem);
element.style.fontSize = (50) + 'px';
}
function Fontminus(elem)
{
let element = document.getElementById(elem);
element.style.fontSize = (30) + 'px';
}

Изменение цвета фона и текста с помощью JavaScript
Чтобы изменить цвет фона элемента HTML страницы с помощью JS, необходимо использовать команду
имя элемента.style.background = "цвет";
В нашем примере это будет команда
element.style.background = "цвет";
Приведем пример JS сценария, в котором меняется размер текста и цвет фона

<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8 />
<title>Изменение стиля</title>
</head>
<body>
<p><button onclick="Fontplus('text');">Увеличить размер шрифта</button></p>
<p><button onclick="Fontminus('text');">Уменьшить размер шрифта</button></p>
<p><button onclick="Backgroundlight('text');">Cветлый фон</button></p>
<p><button onclick="Backgrounddark('text');">Темный фон</button></p>
<p id="text" background="#FF0000" style="font-size:14px;">
itrobo.ru
</p>
<script>
function Fontplus(elem)
{
let element = document.getElementById(elem);
element.style.fontSize = (50) + 'px';
}
function Fontminus(elem)
{
let element = document.getElementById(elem);
element.style.fontSize = (30) + 'px';
}
function Backgroundlight(elem)
{
let element = document.getElementById(elem);
element.style.background = "#808080";
}
function Backgrounddark(elem)
{
let element = document.getElementById(elem);
element.style.background = "#696969"
}
</script>
</body>
</html>

изменение размера текста в js

Вернуться к содержанию курса по js

Полезно : Регистрация домена и размещение сайта на хостинге

Поделиться 

 
 
Комментарии (0)

Нет комментариев. Ваш будет первым!