Добавление id элементу в javascript примеры

Поддержи проект!!!

Как добавить id элементу javascript, как поставить id в див(div), сколько способов установки id в блок! Сегодня попробуем разобраться во всех способах добавить id в тег html. вы должны понимать, что у блока, элемента должен быть какой-то уникальный параметр,Ю который мы должны знать и только после этого мы можем добавить в данный элемент id.

Для того, чтобы вставить в элемент id надо как-то обратиться к тегу к нашему элементу!

1. Как добавить id в уникальный тег
2. Как добавить id если есть класс
3. Как добавить ид нажав на элемент зная его класс
4. Как добавить ид нажав на элемент без уникальных меток

Как добавить id в тег пример

Чтобы видеть процесс добавления id к элементу, давайте придумаем какой-то id -например example и добавим к нему стили, чтобы при добавлении этого ид мы смогли это увидеть...


<style>#example{color:red;}</style>

Сам блок, придумаем ему какой-то новый тег, например newblock


<newblock>Здесь текст в блоке, в который будем добавлять ид</newblock>

Нам еще понадобится кнопка, чтобы это увидеть в процессе:

<button onclick="myFoo()">Добавь ид по клику</button>

И скрипт, который добавить наш новый ид к элементу!

<script>function myFoo(){document.querySelector("newblock").id = "example"; }</script>

Соберем наш код добавления ид к элементу, уникальному тегу:

<newblock>Здесь текст в блоке, в который будем добавлять ид</newblock>

<script>function myFoo(){document.querySelector("newblock").id = "example"; }</script>

<style>#example{color:red;}</style>

<button onclick="myFoo()">Добавь ид по клику</button>

Результат:

Здесь текст в блоке, в который будем добавлять ид Добавь ид по клику

Как добавить id если есть класс пример

Как мы уже выше приводили ссылку обратиться к тегу, и поскольку, теперь нам нужен класс, то для следующего примера, как добавить ид к элементу, предположим, что у нас есть уникальный класс!

Возьмем выше идущий скрипт, который мы написали - точно такую же кнопку..., но теперь у нас будет class="newblock" и будем использовать getElementsByClassName ячейка [0] - означает, что vbs обратимся к первому по счету на странице элементу с классом cnewblock и аналогичным образом добавим новый id уже к элементу с классом...


<div class="newblock">Здесь текст в блоке, в который будем добавлять ид</div>

<script>function myFoo1(){document.getElementsByClassName("newblock")[0].id = "example"; }</script>

<style>#example{color:red;}</style>

<button onclick="myFoo1()">Добавь ид по клику</button>

Результат:

Здесь текст в элементе с классом, в который будем добавлять ид
Добавь ид по клику

Как добавить ид нажав на элемент зная его класс пример

Предположим, что у элемента есть калс, как в выше приведенном примере! Тогда мы можем вынести прямо во внутрь блока в onclick

<div onclick="document.getElementsByClassName('newblock2')[0].id ='example'" class="newblock2">По нажатию на данный блок, будет добавлять себе новый ид</div>

<style>#example{color:red;}</style>

Результат :

По нажатию на данный блок, будет добавляться новый ид

Как добавить ид нажав на элемент без уникальных меток пример

Предположим, что у нашего элемента нет никаких уникальных меток! Мы можем прямо внутрь тега поместить this, и написать вот такую конструкцию:


<div onclick="this.id ='example'">По нажатию на данный блок, будет добавляться новый ид</div>

<style>#example{color:red;}</style>

Результат:

По нажатию на данный блок, будет добавляться новый ид

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =