Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Добавление и Удаление HTML-Классов по запросу при помощи jQuery
Дата добавления: 17.01.2014 - 19:45
Категория: Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 1167
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
БЕСПЛАТНО
рейтинг
0.0
/
голосов
0
Поделись с друзьями:
Ка добавить новые HTML-классовы - это и ежу понятно; просто открыть HTML-документ, найти то, что вы хотите добавить, и вставить имя класса. Но когда дело доходит до построения интерактивного веб-сайта, что позволит посетителям вашего сайта заниматься с ним, вам, возможно, потребуется изменять, вставлять или удалять HTML-классы по запросу.
Мы также можем использовать стандартные JavaScript-коды, чтобы добавить / удалить HTML-классы, например, так:
Код, как вы можете видеть выше, является менее простым, чем когда мы делаем это с JavaScript-фреймворк jQuery. Но если вы не хотите полагаться на основу, вы можете всегда использовать новый API JavaScript который называется classList.
С помощью API classList
Похожими на jQuery, classList предоставляет набор методов, которые позволяют нам изменять HTML-классы.
В случае, когда div с несколькими классами, мы можем получить классы, которые назначаются в div с помощью classList.
Когда мы открываем браузера Консоль, мы можем увидеть список классов.
Добавление нескольких классов также может быть сделано путем разделения каждого класса при помощи запятой:
Чтобы проверить, могут ли определенные элементы содержат указанный класс, мы можем использовать .contains(). Он вернет true, если класс указан, или возвратить false, если это не так.
Мы можем также включать и выключать с помощью класса .toggle().
Следующий фрагмент кода показывает, как мы связываем метод .toggle() событие щелчка мыши.
Вот мы и разобрали как Добавить и Удалить HTML-Классы по запросу при помощи jQuery.
Вы можете сделать это с помощью jQuery. В этом примере функция ниже будет добавлять и удалять, например my-new-class к элементу <div>.
Код
// ## добавить класс
$('div').addClass('my-new-class');
// ## удалить класс
$('div').removeClass('my-new-class');
$('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 , '' )
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);
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');
// удалить класс
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);
function toggle() {
elem.classList.toggle('bg');
}
button.addEventListener('click', toggle, false);
Вот мы и разобрали как Добавить и Удалить HTML-Классы по запросу при помощи jQuery.
