Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Добавление и Удаление HTML-Классов по запросу при помощи jQuery

Дата добавления: 17.01.2014 - 19:45
Добавил: Buger
Количество просмотров: 723
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Добавление и Удаление HTML-Классов по запросу при помощи jQuery
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Ка добавить новые HTML-классовы - это и ежу понятно; просто открыть HTML-документ, найти то, что вы хотите добавить, и вставить имя класса. Но когда дело доходит до построения интерактивного веб-сайта, что позволит посетителям вашего сайта заниматься с ним, вам, возможно, потребуется изменять, вставлять или удалять HTML-классы по запросу.



Вы можете сделать это с помощью jQuery. В этом примере функция ниже будет добавлять и удалять, например my-new-class к элементу <div>.
Код
// ## добавить класс 
$('div').addClass('my-new-class');  
      
// ## удалить класс 
$('div').removeClass('my-new-class');

Мы также можем использовать стандартные JavaScript-коды, чтобы добавить / удалить HTML-классы, например, так:
Код
// добавить класс
document.getElementById('elem').className = 'my-new-class';

// удалить класс
document.getElementById('elem').className = document.getElementByTag('div').className.replace( /(?:^|\s)my-new-class(?!\S)/g , '' )

Код, как вы можете видеть выше, является менее простым, чем когда мы делаем это с JavaScript-фреймворк jQuery. Но если вы не хотите полагаться на основу, вы можете всегда использовать новый API JavaScript который называется classList.

С помощью API classList

Похожими на jQuery, classList предоставляет набор методов, которые позволяют нам изменять HTML-классы.

В случае, когда div с несколькими классами, мы можем получить классы, которые назначаются в div с помощью classList.
Код
var classes = document.getElementByID('elem').classList;  
console.log(classes);

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



Для добавления и удаления класса, мы можем использовать .add() и .remove().
Код
var elem = document.getElementByID('elem');  
      
// добавить класс 
elem.classList.add('my-new-class');  
      
// удалить класс 
elem.classList.remove('my-new-class');

Добавление нескольких классов также может быть сделано путем разделения каждого класса при помощи запятой:
Код
elem.classList.add('my-new-class', 'my-other-class');

Чтобы проверить, могут ли определенные элементы содержат указанный класс, мы можем использовать .contains(). Он вернет true, если класс указан, или возвратить false, если это не так.
Код
elem.classList.contains('class-name');

Мы можем также включать и выключать с помощью класса .toggle().
Следующий фрагмент кода показывает, как мы связываем метод .toggle() событие щелчка мыши.
Код
var button = document.getElementById('button');  
    function toggle() {  
        elem.classList.toggle('bg');  
    }  
    button.addEventListener('click', toggle, false);

Вот мы и разобрали как Добавить и Удалить HTML-Классы по запросу при помощи jQuery.


Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.