Добавление значений через data- jQuery / Скрипты / Сниппеты Bootstrap

Версия: v1.0.0

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 0.9 Kb

Уникальный ID: 3199

Количество символов:

Посмотрели: 1447 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-3199-20

Скачали бесплатно: 24 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: data-* jquery, jquery .data, .data, Bootstrap, data-*, data- script, jquery data-, jQuery, .data jquery, data-

Поделился: BootstrapТема

Добавлено: 2018-12-16 в 12:24

Метка: 1544952283

⇄ ⇅

<tr id="color">
<td><button class="btn btn-success" data-color="#5cb85c">GO</button></td>
<td>color</td>
</tr>

<tr id="background">
<td><button class="btn btn-success" data-background="red">GO</button></td>
<td>background</td>
</tr>

<tr id="height">
<td><button class="btn btn-success" data-height="200px">GO</button></td>
<td>height</td>
</tr>

<tr id="shadow">
<td><button class="btn btn-success" data-shadow="rgb(3, 3, 3) 4px -4px 4px">GO</button></td>
<td>shadow</td>
</tr>

<tr id="add">
<td><button class="btn btn-success" data-add="moi--class">GO</button></td>
<td>addClass</td>
</tr>

</table>

</div></div></div>

// - добавляет свойству color значение установленное в data-color="#5cb85c"
 $('#color').css('color', $(this).data('color'));

// - добавляет свойству background значение установленное в data-background="red"
 $('#background').css('background-color', $(this).data('background'));

// - добавляет свойству font-size значение установленное в data-size="200%"
 $('#size').css('font-size', $(this).data('size'));

// - добавляет свойству height значение установленное в data-height="200px"
 $('#height').css('height', $(this).data('height'));

// - добавляет свойству text-shadow значение установленное в data-shadow="rgb(3, 3, 3) 4px -4px 4px"
 $('#shadow').css('text-shadow', $(this).data('shadow'));

// - добавляет <tr id="add"> свойства класса moi--class
 $('#add').addClass($(this).data('add'));

});
</script>

BootstrapTema

Добавление значений через data- jQuery

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0