What is default z-Index of element in HTML, and how to get it using JavaScript?
So normally we can get z-Index value of a div element using, e.g:
var zindex = document.getElementById(\'id\').style.zIndex;
I am using this
-
Have a look at this question: Getting the z-index of a DIV in JavaScript?:
Since z index is mentioned in the CSS part you won't be able to get it directly through the code that you have mentioned. You can use the following example.
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;
}
pass your element id and style attribute to get to the function.
Eg:
var zInd = getStyle ( "normaldiv1" , "zIndex" );
alert ( zInd );
For firefox you have to pass z-index instead of zIndex
var zInd = getStyle ( "normaldiv1" , "z-index" );
alert ( zInd );
Reference
You must use z-index for Chrome as well.
讨论(0)
-
Default z-index of any element is 'auto' with exception of <html> which has default z-index:0. 'Auto' means that element gets z-index from its parent.
You can see this by using Developer Tools (in Chrome) or any similar tool in other browser. Also you can get this in your code by window.getComputedStyle() as others proposed here.
讨论(0)
-
I believe everything is z-indexed as 0.
Really z-index is only valid if you set it for all the elements you care about.
You can set the z-index of one div to 100000, but it won't matter if you don't set the z-index of the other element you are trying to overlap.
So I guess what I'm trying to say is that the default z-index of the div doesn't matter, it's only computed if you set it.
A div inside of a div doesn't have a specific z-index. Ad div inside of a div inside of the body inside of an iframe, inside of 3 more divs and 1 table, doesn't have a z-index(or a z-index that's computed.).
I can't see that there would be any practical reason for trying to find a z-index of an item, if it's irrelevant anyways.
讨论(0)
-
@Konstantin-Smolyanin
Auto' means that element gets z-index from its parent.
No it doesn't - "inherit" means the element gets its' z-index from its' parent.
When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
讨论(0)
-
You misunderstand the meaning of elements "style" property. By referring element.style what you actually retrieving is elements inline style. For example:
var el = document.getElementById('myEl');
console.log(el.style.zIndex); //you are asking for <div id="myEl" style="z-index: 1;"></div>
and to get the value of your css style(it could be a code goes here tag or any external stylesheet) you have to check is standard method (window.getComputedStyle) supported or not, if not you should check for internet explorer's specific version. You could do so by referring to el.currentStyle.
Summary:
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)
-
You might try window.getComputedStyle() on the element:
https://developer.mozilla.org/en/DOM/window.getComputedStyle
var e = document.getElementById('mydiv');
var value = window.getComputedStyle(e[0], null)['zIndex']
I got these values: "auto", "10". After changing: z-index: 10, position: relative.
讨论(0)
So normally we can get z-Index value of a div element using, e.g:
var zindex = document.getElementById(\'id\').style.zIndex;
I am using this
-
Have a look at this question: Getting the z-index of a DIV in JavaScript?:
Since z index is mentioned in the CSS part you won't be able to get it directly through the code that you have mentioned. You can use the following example.
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; }pass your element id and style attribute to get to the function.
Eg:
var zInd = getStyle ( "normaldiv1" , "zIndex" ); alert ( zInd );For firefox you have to pass z-index instead of zIndex
var zInd = getStyle ( "normaldiv1" , "z-index" ); alert ( zInd );Reference
You must use
z-indexfor Chrome as well.讨论(0) -
Default
z-indexof any element is'auto'with exception of <html> which has defaultz-index:0. 'Auto' means that element gets z-index from its parent.You can see this by using Developer Tools (in Chrome) or any similar tool in other browser. Also you can get this in your code by window.getComputedStyle() as others proposed here.
讨论(0) -
I believe everything is z-indexed as 0. Really z-index is only valid if you set it for all the elements you care about. You can set the z-index of one div to 100000, but it won't matter if you don't set the z-index of the other element you are trying to overlap.
So I guess what I'm trying to say is that the default z-index of the div doesn't matter, it's only computed if you set it.
A div inside of a div doesn't have a specific z-index. Ad div inside of a div inside of the body inside of an iframe, inside of 3 more divs and 1 table, doesn't have a z-index(or a z-index that's computed.).
I can't see that there would be any practical reason for trying to find a z-index of an item, if it's irrelevant anyways.
讨论(0) -
@Konstantin-Smolyanin
Auto' means that element gets z-index from its parent.
No it doesn't - "inherit" means the element gets its' z-index from its' parent.
When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
讨论(0) -
You misunderstand the meaning of elements "style" property. By referring element.style what you actually retrieving is elements inline style. For example:
var el = document.getElementById('myEl'); console.log(el.style.zIndex); //you are asking for <div id="myEl" style="z-index: 1;"></div>and to get the value of your css style(it could be a code goes here tag or any external stylesheet) you have to check is standard method (window.getComputedStyle) supported or not, if not you should check for internet explorer's specific version. You could do so by referring to el.currentStyle.
Summary:
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) -
You might try window.getComputedStyle() on the element:
https://developer.mozilla.org/en/DOM/window.getComputedStyle
var e = document.getElementById('mydiv'); var value = window.getComputedStyle(e[0], null)['zIndex']I got these values: "auto", "10". After changing: z-index: 10, position: relative.
讨论(0)
加载中...
- 热议问题