Помощь Joomla



Добавить Атрибут в Тег с Помощью Javascript

Разработка → HTML-атрибуты data-* для хранения параметров и получения их в js из песочницы  Сентябрь 10, 2017 – 14:34
Атрибуты ...........

А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.

Как может показаться, тут можно задействовать id, но у нас могут быть блоки с одинаковым номером.

Иногда используют атрибут ‘rel’, но его можно использовать только для ссылок, хотя я видел и у других элементов. И опять же недостаток — мы можем записать в него только одно значение.

И вот нам на помощь спешат Чип и Дейл атрибуты data-*.

Плюшки

Можно присобачить к любому тегу и старые браузеры ничего не скажут против.
Можно в названии писать словосочетания: data-email-id=”190”.
Можно использовать любую строку в значении.
Можно использовать любой количество таких параметров для одного тега.

HTML тогда превратится в это:

Самое интересное — это использование функции .data.
В версии 1.4.3 data научилось получать наши атрибуты data-* вот таким образом:

var action = $(selector).data(‘action’); // close

Если же мы использовали словосочетание через дефис, то мы сможем получить его в camelCase:

&nbsp $('#superid').data('fooBar'); // вернет 123

Один минус (а может и не минус) — это то, что в data сохранится только изначальное значение (кешируется), и если мы изменим значение атрибута (например, через .attr(‘data-foo-bar’, 456)), то получая .data('fooBar') увидим наше старое значение.
Но никто не мешает нам обновлять значение в 2х местах, если мы так захотим:

var baz = 150; $(selector).data('fooBar', baz).attr('data-foo-bar', baz);

Хотя, если вам не нужно отслеживать код в, например, фаербаге, то можно и не обновлять .attr, так как он влияет только на “визуальное” отображение.

В общем, как только вам понабиться сохранить дополнительные параметры в теге, то используйте data-атрибуты.

ЗЫ:

Интересно, кто нибудь пробовал хранить в атрибутах json? :)
Хотя это, пожалуй, в ненормальное программирование.

ЗЫЫ:

Многие говорят про функцию jQuery.data(elem, key, [value])
Кто не знает, эта функция отличается от $(selector).data(key, [value])
Она позволяет привязывать данные к DOM-элементам любым объектам, а не к jQuery объектам. Да, она работает на 60% быстрей, но вот data-* атрибуты она не получает.
Что еще почитать?

Source: habrahabr.ru

Похожие публикации:

  1. Скачать Видео Уроки Javascript
  2. Анимация Помощью Javascript
  3. Css Изменения с Помощью Javascript
  4. Как Изменить Css с Помощью Javascript
  5. Взлом Одноклассников с Помощью Javascript