web-dev-qa-db-ja.com

HTMLの<div>要素のデフォルトのz-Indexとは何ですか？JavaScriptを使用して取得するにはどうすればよいですか？

そのため、通常はdiv要素のz-Index値を次のように取得できます。

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

私はコードでこの値を使用して何かをしています。ここで問題は、HTMLコードで何も定義されていない（またはz-Indexが外部cssで定義されている場合でも）デフォルト値にあり、同じJavaスクリプトコマンドは何も返しません。

デフォルトの場合、ブラウザは通常、要素スタックに基づいてレンダリングを決定することを理解しています。しかし、値が定義されていないというJavaScriptでこれを実現する特定の値または方法はありますか？

つまり、通常、何も返されない場合、値が定義されていないことを意味します。しかし、それは外部のcssでも起こったので、どうすれば両方を区別できますか？

javascriptcssz-index
31
Johnydep

要素で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、位置：相対。

13
Gringo Suave

デフォルトz-indexの要素は'auto'例外<html>で、デフォルトはz-index:0。 'Auto'は、要素がそのparentからz-indexを取得することを意味します。

これは、デベロッパーツール（Chrome）または他のブラウザーの同様のツールを使用して確認できます。また、コードで window.getComputedStyle（） を使用してこれを取得することもできます。

34
Konstantin Smolyanin

私はすべてが0としてz-indexされていると思います。本当にz-indexは、気になるすべての要素に対して設定した場合にのみ有効です。 1つのdivのz-indexを100000に設定できますが、重複させようとしている他の要素のz-indexを設定しなくても問題ありません。

つまり、divのデフォルトのz-indexは重要ではなく、設定した場合にのみ計算されるということです。

Div内のdivには特定のz-indexがありません。 iframe内の本体内のdiv内の広告div、さらに3つのdivと1つのテーブル内の広告divには、Zインデックス（または計算されたZインデックス）がありません。

とにかく関係がない場合、アイテムのZインデックスを見つけようとする実用的な理由があるとは思えません。

5
Kelly Elton

@ Konstantin-Smolyanin

Auto 'は、要素がその親からz-indexを取得することを意味します。

いいえ、そうではありません-「継承」とは、要素がそのzインデックスをその親から取得することを意味します。

Z-indexプロパティが指定されていない場合、要素はデフォルトのレンダリングレイヤー0（ゼロ）でレンダリングされます。

2
Neil

この質問を見てください： JavaScriptでDIVのz-indexを取得しますか？ ：

CSS部分でzインデックスが言及されているため、言及したコードから直接取得することはできません。次の例を使用できます。

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;
}

要素IDとスタイル属性を渡して、関数にアクセスします。

例えば：

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

firefoxの場合、zIndexの代わりにz-indexを渡す必要があります

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

参考

Chromeの場合もz-indexを使用する必要があります。

2
Korvin Szanto

要素の「スタイル」プロパティの意味を誤解している。 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）がサポートされているかどうか、そうでない場合は、Internet Explorerの特定のバージョンをチェックする必要があります。 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'];
0
orustam