Изменение z-index посредством javascript


Изменение z-index посредством javascript

  • используй jQuery
    $(document).ready(function(){

    $(«.class»).css({‘z-index’ : 1});

    });

  • Все довольно просто.
    Шаг 1.

    Создай файл с расширением .js (через «Блокнот», и сохрани как «Все файлы», кодировка «UTF-8″ — обязательно!) , в котором должен быть сам скрипт:

    function on(){var z = document.getElementById(‘здесь id элемента’);z.style.z-index = ’9999′;}
    function off(){var z = document.getElementById(‘здесь id того же элемента’);z.style.margin = ’1′;}

    Сохраненный файл, например zindex.js заливаешь к себе на сайт (в Файловый менеджер) .



    Шаг 2.

    В HTML страницы (где нужны кнопки) перед закрывающим тегом пишем:



    Шаг 3.

    Вставляем в HTML там, где хотим видеть кнопки переключения:

    Изменить z-index

    Базовый z-index



    где:

    javascript:on() — увеличивает стилевое свойство z-index.

    javascript:off() — возвращает начальное значение z-index.

    ПОЯСНЕНИЯ:

    Шаг 1.

    В скрипте указываем не класс, а именно id того элемента, z-index которого меняем. Если у элемента нет индекса, то прописываем его (id=»zindex»).

    И вставляем этот id в скрипт: getElementById(‘zindex’).

    Шаг 2.

    src=»/zindex.js» — это если сохранять не в папку, а если в папку, например «scripts», тогда запись будет такой: src=»/scripts/zindex.js».

    Шаг 3.

    Кнопки изменения z-index’а получаются в виде ссылок. Если нужны кнопки, то попробуй использовать «button» вместо «a», или просто добавь к «a» id=»zindex_button», а в CSS пропиши стили со всевозможным скруглением уголков, градиентом, тенями и прочим.




Предыдущий:

Следующий: