如何根据最高z索引获取元素属性
如何根据最高z索引获取元素属性
提问于 2018-07-31 03:38:09
我不知道如何获取它，我有一些具有common_class类名的元素，我想得到最高z索引元素的ID，可以吗？
function findHighestZIndex(elem)
{
var elems = document.getElementsByClassName(elem);
var highest = 0;
for (var i = 0; i < elems.length; i++)
{
var id = document.getElementsByClassName(elem);
id.getAttribute("id");
console.log(id);
var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
var ElementDisplay = document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("display");
if ((zindex > highest) && (zindex != 'auto') && (ElementDisplay == 'block'))
{
highest = zindex;
}}
回答 3
Stack Overflow用户
发布于 2018-07-31 04:05:35
下面是一个简短的getHighest(selector)函数的实现，以及一个使用此函数检索索引值的示例代码段(单击框以递增其z索引)。
(重要的部分是前三个函数；如果需要，可以将它们压缩为一个函数。)
function getHighest(selector) {
// Return the element that matches selector having the largest z index
return Array.from(document.querySelectorAll(selector)).reduce((a, b) => getZIndex(a) >= getZIndex(b) ? a : b);
}
function getZIndex(el) {
// Return the z-index of el, or 0 if none is set.
return parseInt(getCssProperty(el, "z-index")) || 0;
}
function getCssProperty(el, prop) {
// Return the computed value of the css property prop for the element el
return document.defaultView.getComputedStyle(el, null).getPropertyValue(prop);
}
// -------------------------------------------------------------------------
// additional code for demo below
// -------------------------------------------------------------------------
function updateHighest() {
let highest = getHighest(".box");
document.querySelector("#highest").textContent = `#${highest.id} (${getZIndex(highest)})`;
document.querySelector("#highest").style.color = getCssProperty(highest, "background-color");
}
function setContentToZIndex(el) {
el.textContent = getZIndex(el);
}
Array.from(document.querySelectorAll(".box")).forEach(b => {
b.onclick = () => {
b.style.zIndex = getZIndex(b) + 1;
setContentToZIndex(b);
updateHighest();
};
setContentToZIndex(b);
updateHighest();
});.box {
width: 100px;
height: 100px;
display: block;
background: grey;
position: absolute;
color: white;
font-size: 2rem;
text-align: center;
line-height: 100px;
user-select: none;
font-family: sans-serif;
}
#b1 {
background: #ff268a;
left: 0px;
top: 0px;
}
#b2 {
background: #242792;
left: 50px;
top: 50px;
}
#b3 {
background: #0ac3d6;
left: 25px;
top: 75px;
}
p {
margin-left: 200px;
font-family: sans-serif;
font-size: 1.2rem;
}<div class="box" id="b1"></div>
<div class="box" id="b2"></div>
<div class="box" id="b3"></div>
<p>highest z-index: <span id="highest"></span></p>
Stack Overflow用户
发布于 2018-07-31 03:56:31
如果您在这里指的是不获取id值：
var elems = document.getElementsByClassName(elem);
var highest = 0;
for (var i = 0; i < elems.length; i++)
{
//This is all wrong here, commenting it out
//var id = document.getElementsByClassName(elem); //You already have this collection
//id.getAttribute("id"); //The above returns a collection so this would fail, you'd need to use an index of the collection
//console.log(id);
//You already have the elements you want, just use the i index to grab the element
//and it's id
console.log(elems[i].id);Stack Overflow用户
发布于 2018-07-31 03:47:13
您可以使用以下函数：
function isNumeric(val) {
return !isNaN(parseFloat(val)) && isFinite(val);
}
function findHighestZIndex(className) {
let queryObject = document.getElementsByClassName(className);
let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
let highest = 0;
var highestElem;
childNodes.forEach((node) => {
// Get the calculated CSS z-index value.
let cssStyles = document.defaultView.getComputedStyle(node);
let cssZIndex = cssStyles.getPropertyValue('z-index');
// Get any inline z-index value.
let inlineZIndex = node.style.zIndex;
// Coerce the values as integers for comparison.
cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0;
inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0;
// Take the highest z-index for this element, whether inline or from CSS.
let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex;
if ((currentZIndex > highest)) {
highest = currentZIndex;
highestElem = node;
}
});
var obj = {highestZIndex: highest, elem: highestElem};
return obj;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<html>
<body>
<div class="test" style="z-index: 100;" id="x">1</div>
<div class="test" style="z-index: 10;">2</div>
<div class='test' id="test">3</div>
<script>
function isNumeric(val) {
return !isNaN(parseFloat(val)) && isFinite(val);
}
function findHighestZIndex(className) {
let queryObject = document.getElementsByClassName(className);
let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
let highest = 0;
var highestElem;
childNodes.forEach((node) => {
// Get the calculated CSS z-index value.
let cssStyles = document.defaultView.getComputedStyle(node);
let cssZIndex = cssStyles.getPropertyValue('z-index');
// Get any inline z-index value.
let inlineZIndex = node.style.zIndex;
// Coerce the values as integers for comparison.
cssZIndex = isNumeric(cssZIndex) ? parseInt(cssZIndex, 10) : 0;
inlineZIndex = isNumeric(inlineZIndex) ? parseInt(inlineZIndex, 10) : 0;
// Take the highest z-index for this element, whether inline or from CSS.
let currentZIndex = cssZIndex > inlineZIndex ? cssZIndex : inlineZIndex;
if ((currentZIndex > highest)) {
highest = currentZIndex;
highestElem = node;
}
});
var obj = {highestZIndex: highest, elem: highestElem};
return obj;
}
console.log(findHighestZIndex('test').elem.id);
</script>
</body>
</html>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51601136
复制相关文章
相似问题