В этом разделе вы попрактикуетесь в удалении HTML атрибутов элементов веб-страницы с помощью JavaScript. Каждое задание представляет собой готовую HTML-структуру и частично написанный JavaScript код. Ваша задача - заполнить пропуски в JavaScript коде, чтобы удалить указанные атрибуты и добиться желаемого результата. Упражнения расположены от простого к сложному, что позволит вам постепенно освоить эту важную тему.
- Модуль 1: Основы выбора элементов
- Выбор элемента по ID.
- Выбор элементов по классу.
- Выбор элементов по тегу.
- Выбор по селектору CSS.
- Выбор по атрибуту.
- Поиск элементов внутри другого элемента.
- Поиск родительского элемента.
- Поиск соседних элементов (предыдущий, следующий).
- Поиск первого и последнего дочернего элемента.
- Поиск всех дочерних элементов.
- Модуль 2: Манипуляция содержимым
- Модуль 3: Работа с атрибутами
- Модуль 4: Управление классами
- Модуль 5: Управление стилями
- Модуль 6: Создание и удаление элементов
- Создание нового элемента.
- Вставка элемента перед другим элементом.
- Вставка элемента после другого элемента.
- Добавление элемента в определенную позицию внутри списка дочерних элементов.
- Удаление элемента из DOM.
- Замена одного элемента другим.
- Перемещение существующего элемента в другое место DOM..
- Очистка содержимого элемента без его удаления.
- Модуль 7: Обработка событий
- Модуль 8: Работа с формами
- Модуль 9: Продвинутые манипуляции
- Модуль 10: Работа с размерами и прокруткой
- Получение размеров элемента.
- Получение позиции элемента относительно окна браузера.
- Получение позиции элемента относительно родительского элемента.
- Управление прокруткой страницы.
- Определение, виден ли элемент в текущей области просмотра.
- Плавная прокрутка к элементу.
- Создание элемента, который фиксируется при прокрутке.
- Модуль 11: Работа с медиа-элементами
- Модуль 12: Практические задания
Удаление атрибута 'disabled' у кнопки
На странице есть кнопка с атрибутом 'disabled'. Ваша задача - используя JavaScript, сделать кнопку активной, удалив этот атрибут. После выполнения кода кнопка должна стать кликабельной.
<button id="myButton" disabled>Нажми меня</button>document.input__1("myButton").input__2("disabled");Удаление атрибута 'placeholder' у поля ввода
На странице есть поле ввода с текстом-заполнителем (placeholder). Необходимо удалить атрибут 'placeholder' с помощью JavaScript. После выполнения кода поле ввода должно стать пустым при фокусировке.
<input type="text" id="myInput" placeholder="Введите текст">document.input__1("myInput").input__2("placeholder");Удаление атрибута 'title' у изображения
На странице есть изображение с всплывающей подсказкой (атрибут 'title'). Ваша задача - удалить этот атрибут, чтобы подсказка больше не отображалась при наведении курсора на изображение.
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png" alt="Изображение" title="Всплывающая подсказка">document.input__1("myImage").input__2("title");Удаление атрибута 'data-info' у абзаца
На странице есть абзац с пользовательским атрибутом 'data-info'. Необходимо удалить этот атрибут. После выполнения кода атрибут 'data-info' должен исчезнуть из HTML-кода абзаца.
<p id="myParagraph" data-info="Важная информация">Это абзац с пользовательским атрибутом.</p>document.input__1("myParagraph").input__2("data-info");Удаление атрибута 'style' у элемента
На странице есть элемент, к которому применены стили непосредственно в HTML (атрибут 'style'). Ваша задача - удалить этот атрибут 'style', чтобы стили, заданные через атрибут, перестали действовать, и элемент вернулся к стилям по умолчанию или стилям из CSS.
<div id="myDiv" style="color: red; font-weight: bold;">Этот текст красный и жирный.</div>document.input__1("myDiv").input__2("style");Удаление атрибута 'target' у ссылки
На странице есть ссылка, которая открывается в новой вкладке (атрибут 'target="_blank"'). Ваша задача - удалить атрибут 'target', чтобы ссылка открывалась в текущей вкладке.
<a id="myLink" href="https://example.com" target="_blank">Ссылка, открывающаяся в новой вкладке</a>document.input__1("#myLink").input__2("target");Удаление атрибута 'value' у поля ввода и проверка
На странице есть поле ввода с предустановленным значением (атрибут 'value'). Удалите атрибут 'value' с помощью JavaScript. После выполнения кода поле ввода должно отображаться пустым, даже если в HTML был указан атрибут 'value'.
<input type="text" id="myInputWithValue" value="Начальное значение">document.input__1("myInputWithValue").input__2("value");Удаление атрибута 'hidden' для отображения элемента
На странице есть скрытый элемент (атрибут 'hidden'). Ваша задача - сделать элемент видимым, удалив атрибут 'hidden'. После выполнения кода элемент должен стать видимым на странице.
<div id="hiddenDiv" hidden>Этот элемент скрыт.</div>document.input__1("#hiddenDiv").input__2("hidden");Удаление атрибута 'class' и возврат к базовому стилю
На странице есть элемент с классом, который применяет определенные стили. Удалите атрибут 'class' у этого элемента. После выполнения кода элемент должен вернуться к своему базовому стилю (стилям по умолчанию или стилям, заданным для элемента без класса).
.styled-element { color: blue; font-size: 18px; }<p id="styledParagraph" class="styled-element">Этот абзац стилизован классом.</p>document.input__1("styledParagraph").input__2("class");Удаление атрибута 'alt' у изображения (не рекомендуется, но для практики)
На странице есть изображение с атрибутом 'alt' (альтернативный текст). Удалите атрибут 'alt'. Хотя удаление 'alt' атрибута не рекомендуется для доступности, это упражнение для практики удаления атрибутов. После выполнения кода, если изображение не загрузится, альтернативный текст не будет отображаться.
<img id="altImage" src="https://naytikurs.ru/assets/uploads/2025/03/test-na-znanie-osnov-kiberbezopasnosti-300x300.png" alt="Изображение с альтернативным текстом">document.input__1("#altImage").input__2("alt");
Загрузка...