Форма входа

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

    Уважаемые друзья и пользователи сайта ART-UCOZ!

    Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!

    Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
    Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.

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

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

    Дата добавления: 17.01.2014 - 19:45
    Добавил: Buger
    Количество просмотров: 2.1k
    Количество комментариев: 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.
    Добавлять комментарии могут только зарегистрированные пользователи.


    Поделись с друзьями: