Что такое z-Index по умолчанию для элемента <div> в HTML и как его получить с помощью JavaScript?

Таким образом, мы можем получить значение z-индекса элемента div, используя, например:

var zindex = document.getElementById('id').style.zIndex;

Я использую это значение в своем коде, чтобы что-то сделать. Теперь проблема заключается в значениях по умолчанию, где в HTML-коде нет ничего определенного (или даже в тех случаях, когда z-Index задан во внешнем css), то же java script команда ничего не возвращает.

Я понимаю, что в случае по умолчанию, как правило, браузер решает рендеринг на основе стека элементов. Но есть ли какая-то конкретная ценность или способ реализовать это в JavaScript, что нет значения, определенного?

Я имею в виду, что обычно ничего не возвращалось, это означает, что значение не определено. Но это также происходит с внешним css, поэтому как я могу отличить оба?

Ответ 1

Вы можете попробовать window.getComputedStyle() для элемента:

https://developer.mozilla.org/en/DOM/window.getComputedStyle

var e = document.getElementById('mydiv');
var value = window.getComputedStyle(e[0], null)['zIndex']

Я получил эти значения: "auto", "10". После изменения: z-index: 10, position: relative.

Ответ 2

Значение по умолчанию z-index для любого элемента 'auto', за исключением <html> , которое имеет значение по умолчанию z-index:0. "Авто" означает, что элемент получает z-индекс от своего родителя.

Это можно увидеть с помощью инструментов разработчика (в Chrome) или любого подобного инструмента в другом браузере. Также вы можете получить это в своем коде window.getComputedStyle(), как и другие, предлагаемые здесь.

Ответ 3

Я считаю, что все индексируется z как 0. Действительно, z-index действителен только в том случае, если вы установите его для всех интересующих вас элементов. Вы можете установить z-индекс одного div на 100000, но не имеет значения, если вы не установите z-индекс другого элемента, который вы пытаетесь пересечь.

Итак, я думаю, что я пытаюсь сказать, что z-индекс по умолчанию для div не имеет значения, он вычисляется только при его установке.

У div внутри div нет специального z-индекса. Ad div внутри div внутри тела внутри iframe, внутри еще трех div и 1 таблицы, не имеет индекса z (или вычисляемого z-индекса).

Я не вижу, что будет какая-то практическая причина для поиска z-индекса элемента, если это не имеет никакого отношения.

Ответ 4

Посмотрите на этот вопрос: Получение z-индекса DIV в JavaScript?:

Так как индекс z указан в части CSS, вы не сможете получить его напрямую через указанный вами код. Вы можете использовать следующий пример.

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);

    if (window.getComputedStyle)
    {
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); 
    }  
    else if (x.currentStyle)
    {
        var y = x.currentStyle[styleProp];
    }                     

    return y;
}

передайте свой идентификатор элемента и атрибут стиля, чтобы перейти к функции.

Например:

var zInd = getStyle ( "normaldiv1" , "zIndex" );
alert ( zInd );

Для firefox вам нужно передать z-index вместо zIndex

var zInd = getStyle ( "normaldiv1" , "z-index" );
 alert ( zInd );

Ссылка

Вы также должны использовать z-index для Chrome.

Ответ 5

Вы неправильно понимаете значение свойства "стиль" элементов. Обращаясь к элементу element.style, вы фактически извлекаете элементы встроенного стиля. Например:

var el = document.getElementById('myEl');

console.log(el.style.zIndex); //you are asking for <div id="myEl" style="z-index: 1;"></div>

и чтобы получить значение вашего стиля css (это может быть код, который идет здесь, тег или любая внешняя таблица стилей), вы должны проверить, поддерживается или нет стандартный метод (window.getComputedStyle), если вы не должны проверять интернет-проводник конкретной версии. Вы можете сделать это, указав el.currentStyle.

Сводка:

to get inline style: var zIndex = el.style.zIndex

to get stylesheet value or style tag value:

    standard method: var zIndex = window.getComputedStyle(el,null).getPropertyValue('z-index');

    ie method: var zIndex = el.currentStyle['z-index'];

Ответ 6

@Константин-Смолянин

Авто "означает, что элемент получает z-индекс от своего родителя.

Нет, это не так - "inherit" означает, что элемент получает свой "z-index" из своего родителя.

Когда не указано свойство z-index, элементы отображаются на уровне рендеринга по умолчанию 0 (ноль).