在页面上获取最高的zIndex [英] Get hi-est zIndex on the page
问题描述
我正在寻找一个脚本来获取页面上最好的z-index。
我想要我的javascript菜单总是在页面顶部（向上移动
顶部向下滚动）。
有谁知道如何扫描所有项目/元素在z-index页面上？
谢谢，
Wouter
Hi,
I''m looking for a script to get the hi-est z-index on a page.
I want my javascript menu to be always on top of the page (moves along on
top when you scroll down).
Does anyone know how to scann all items/elements on the page for a z-index?
Thanks,
Wouter
推荐答案
DJ WIce hu kiteb：
DJ WIce hu kiteb:
我正在寻找一个脚本来获取页面上最好的z-index 。
我希望我的javascript菜单始终位于页面顶部（向下滚动时向上移动
）
有谁知道如何扫描所有项目/页面上的元素
z-index？
Hi,
I''m looking for a script to get the hi-est z-index on a page.
I want my javascript menu to be always on top of the page (moves
along on top when you scroll down).
Does anyone know how to scan all items/elements on the page for a
z-index?
假设网站管理员正在实施此菜单
系统知道z-indices是什么，为什么不用webmaster-set
变量来标记菜单的基本z-index值。网站管理员可以
然后设置为比他们正在使用的z-index高1。
-
-
Fabian
经常长时间访问我的网站！
http://www.lajzar.co.uk
On the assumption that the webmaster who is implemetning this menu
system knows what the z-indices are, why not have a webmaster-set
variable to mark the base z-index value of your menu. Webmasters can
then set that to 1 higher than whatever z-index they are using.
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk
：假设网站管理员是谁实现这个菜单
：系统知道z-indices是什么，为什么没有webmaster-set
：变量来标记菜单的基本z-index值。网站管理员可以
：然后将其设置为比他们使用的任何z-index高1。
嗯，我正在建设的网站非常大而且我不是唯一一个
实现页面的人。
当页面被更改时我不想检查是否需要更改
手工最高z-index变量。
关闭因为我可以将它设置为某个非常高的值''999''但我只是想要
确保通过脚本。
在MSIE中，这个脚本可以获得最高的索引：
if（document.all）
{
topZ = 0;
for（z = 0; z< document.all.length; z ++）
{
oldEl = document.all（z）;
topZ = Math.max（oldEl.style.zIndex，topZ）
}
topZ ++;
}
由于document.all只是MSIE，我想知道Mozilla的等价物
因此脚本可以在NN等上运行。
谢谢，
Wouter
: On the assumption that the webmaster who is implemetning this menu
: system knows what the z-indices are, why not have a webmaster-set
: variable to mark the base z-index value of your menu. Webmasters can
: then set that to 1 higher than whatever z-index they are using.
Well, the website I''m building is very big and I''m not the only one who
implements pages.
When a page is changed I do not want to check if I need to change the
highest z-index variable by hand.
Off cause I can set it to some very high value ''999'' but I just want to be
sure via a script.
In MSIE this script works to get the highest index:
if(document.all)
{
topZ = 0;
for (z=0;z<document.all.length;z++)
{
oldEl = document.all(z);
topZ = Math.max(oldEl.style.zIndex,topZ)
}
topZ++;
}
Since document.all is MSIE only I would like to know the Mozilla equivalent
of it so the script will work on NN etc.
Thanks,
Wouter
" DJ WIce" <共********* @ djwice.com>写道：
"DJ WIce" <co*********@djwice.com> writes:
在MSIE中，这个脚本可以获得最高的索引：
if（document.all）
{
topZ = 0;
for（z = 0; z< document.all.length; z ++）
{
oldEl = document.all（z）;
topZ = Math.max（oldEl.style。 zIndex，topZ）
}
topZ ++;
}
不，它不是。它只查找样式属性中的z-index集。
它不会找到那些使用CSS规则的集合，例如
< style type =" text / css">
#higher {z-index：1000000000;}
< / style>
To找到一个元素的实际z-index，你需要一个浏览器，
可以访问它。目前，我所知道的是：IE
（专有方法），Mozilla和Opera 7.2）
由于document.all只是MSIE，我想知道Mozilla相当于它，所以脚本可以在NN等上运行。
In MSIE this script works to get the highest index: if(document.all)
{
topZ = 0;
for (z=0;z<document.all.length;z++)
{
oldEl = document.all(z);
topZ = Math.max(oldEl.style.zIndex,topZ)
}
topZ++;
}
No it doesn''t. It only looks for the z-index set in the style attributes.
It won''t find those set useing CSS rules, e.g.
<style type="text/css">
#higher {z-index: 1000000000;}
</style>
To find the actual z-index of an element, you need a browser that
gives access to that. Currently, the ones that I know of are: IE
(proprietary method), Mozilla and Opera 7.2)
Since document.all is MSIE only I would like to know the Mozilla equivalent
of it so the script will work on NN etc.
问题不在于document.all，而是对样式的访问。
您还应该知道并非所有z-indices都相同。具有
a z-index的元素会创建一个新的堆叠上下文，其中的元素是
，这些元素都与该元素相关，而不是文档的其余部分。
示例：
< div style =" position：relative">
< div style =" ; z索引：4; border：5px solid red; width：100px; height：100px;
position：absolute; left：0px; top：0px;">
< div style =" z-index：100000; border：5px solid green; width：100px; height：100px;
position：absolute; left：25px; top：25px;">< / div>
< / div>
< div style =" z-index：5;边框：5px纯蓝色;宽度：100px;高度：100px;
位置：绝对;左：50px;顶部：50px;">
< div style = QUOT; z索引：1;边框：5px纯黄色;宽度：100px;高度：100px;
位置：绝对;左：25px;顶部：25px;">< / div>
< / div>
< / div>
此处的正确堆叠为红色<绿色<蓝色<黄色，即使实际
z-indices的值按黄色排序< red< blue< green。
这是因为整个元素带有红色边框，包括其内部
green div，与蓝色元素相比具有z-index 4。
100000的z指数仅与红色元素的堆叠上下文有关。
你不必担心这个，但是，因为z-index太高而不是
a问题。
所以，对于你的代码，document.all的直接翻译将是
document.getElementsByTagName（" *"）。你可能想要同时使用两者：
---
var allElems = document.getElementsByTagName？
document.getElementsByTagName（ " *"）：
document.all; //或测试那个
var maxZIndex = 0;
for（var i = 0; i< allElems.length; i ++）{
var elem = allElems [i];
var cStyle = null;
if（elem.currentStyle）{cStyle = elem.currentStyle;}
else if（document.defaultView&& document.defaultView.getComputedStyle）{
cStyle = document.defaultView.getComputedStyle（elem，""）;
}
var sNum;
if（cStyle）{
sNum = Number（cStyle.zIndex）;
} else {
sNum = Number（elem.style.zIndex）;
}
if（！isNaN（sNum））{
maxZIndex = Math.max（maxZIndex，sNum）;
}
}
---
在IE 6，Opera 7.5（预览版）和Mozilla中测试过。
/ L
-
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML死亡颜色：< URL：http：// www.infimum.dk/HTML/rasterTriangleDOM.html>
''F没有判断的aith只会降低精神神圣。''
The problem is not the document.all, but the accessing of the style at all.
You should also know that not all z-indices means the same. An element with
a z-index creates a new stacking context, and elements inside that are
all in ralation to that element, not the rest of the document.
Example:
<div style="position:relative">
<div style="z-index:4; border:5px solid red;width:100px;height:100px;
position:absolute;left:0px;top:0px;">
<div style="z-index:100000;border:5px solid green;width:100px;height:100px;
position:absolute;left:25px;top:25px;"></div>
</div>
<div style="z-index:5; border:5px solid blue;width:100px;height:100px;
position:absolute;left:50px;top:50px;">
<div style="z-index:1; border:5px solid yellow;width:100px;height:100px;
position:absolute;left:25px;top:25px;"></div>
</div>
</div>
The correct stacking here is red<green<blue<yellow, even though the actual
values of the z-indices are ordered as yellow<red<blue<green.
That is because the entire element with red border, including its inner
green div, has z-index 4 in relation to the blue element. The z-index of
100000 is only in relation to the stacking context of the red element.
You don''t have to worry about this, though, since too high a z-index is not
a problem.
So, for your code, the direct translation of document.all would be
document.getElementsByTagName("*") . You will probably want to use both:
---
var allElems = document.getElementsByTagName?
document.getElementsByTagName("*"):
document.all; // or test for that too
var maxZIndex = 0;
for(var i=0;i<allElems.length;i++) {
var elem = allElems[i];
var cStyle = null;
if (elem.currentStyle) {cStyle = elem.currentStyle;}
else if (document.defaultView && document.defaultView.getComputedStyle) {
cStyle = document.defaultView.getComputedStyle(elem,"");
}
var sNum;
if (cStyle) {
sNum = Number(cStyle.zIndex);
} else {
sNum = Number(elem.style.zIndex);
}
if (!isNaN(sNum)) {
maxZIndex = Math.max(maxZIndex,sNum);
}
}
---
Tested in IE 6, Opera 7.5(preview) and Mozilla.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
''Faith without judgement merely degrades the spirit divine.''
这篇关于在页面上获取最高的zIndex的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
