Блог

Главная - Вопросы по программированию - Добавление / удаление класса в html с помощью функции js

Добавление / удаление класса в html с помощью функции js

#javascript #html

#javascript #HTML

Вопрос:

Я хочу добавить класс в body в HTML с помощью Javascript с помощью кнопки, которая выполняет функцию, а затем удалить ее с помощью другой кнопки. Но я хочу сохранить этот класс, пока не будет нажата другая кнопка, используя localStorage. Я могу сделать это без localStorage

 $('body').addClass('Class here');

Но как с localStorage?

Ответ №1:

Используя Storage.setItem для сохранения, затем Storage.getItem для извлечения, например:

 var className = "theclass";

// Put the class name into storage
localStorage.setItem('className', className);

// Retrieve the class name from storage
var retrievedClassName = localStorage.getItem('className');

$('body').addClass(retrievedClassName);

Комментарии:

1. Что я вкладываю в обе функции?

2. setItem(ключ, значение), GetItem(ключ)

Ответ №2:

Вот рабочий код с jquery:

 <html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body class="">
        <div class="form-group">
            <button class="button">your button</button>
        </div>
        <script>
            var className = "theclass";

            jQuery('.button').on( 'click', function(){
                localStorage.setItem('className', className);
                jQuery('body').addClass(className);
            });

            // Retrieve the class name from storage
            var retrievedClassName = localStorage.getItem('className');
            jQuery('body').addClass(retrievedClassName);
        </script>
    </body>
</html>

И здесь без:

 <html>
    <head></head>
    <body id="mybigbody" class="">
        <div class="form-group">
            <button id="button">your button</button>
        </div>
        <script>
            var className = "theclass";
            var body = document.getElementById("mybigbody");

            document.getElementById('button').onclick = function(e) {
                localStorage.setItem('className', className);
                body.setAttribute("class", className);
                e.stopPropagation();
            }

            // Retrieve the class name from storage
            var retrievedClassName = localStorage.getItem('className');
            if(retrievedClassName)
                body.setAttribute("class", retrievedClassName);
        </script>
    </body>
</html>

Комментарии:

1. Я не использую Jquery

2. @jekeajames Итак, скажите мне, что такое $$? Я подумал, что это опечатка jquery.

3. В любом случае проблема та же. Внутри вашего события click вы можете установить classname в вашем localstorage и в вашем теле. И снаружи, при запуске вы должны повторно создать свой класс с помощью GetItem и прикрепить его к телу.

4. Как, добавив GetItem в тело? Извините, но я новичок в JS

5. @jekeajames с var retrievedClassName = localStorage.getItem('className'); помощью вы можете получить из своего локального хранилища класс, который вы сохранили с помощью click в какой-то предыдущий момент. Итак, в полученном className у вас есть имя вашего класса. Теперь вы должны прикрепить его к своему телу. С помощью javascript без библиотеки andy вы можете сделать var body = document.getElementById("body"); body.setAttribute("class", retrievedClassName);

Метки: