반응형
문서에서 가장 높은 Z- 색인을 어떻게 알아낼 수 있습니까?
투명한 텍스트 이미지가 포함 된 div를 문서에서 가장 높은 Z- 색인으로 설정하기 위해 10,000 번을 선택하여 문제를 해결했습니다.
이전에는 3 번으로 추측했지만 효과가 없었습니다.
그렇다면 Z- 색인이 다른 모든 요소보다 높은지 알아내는 더 과학적인 방법이 있습니까?
Firebug에서이 메트릭을 찾으려고했지만 찾을 수 없었습니다.
다음 findHighestZIndex과 같이 'DIV'와 같은 특정 요소 유형을 호출 할 수 있습니다 .
findHighestZIndex('div');
findHighestZindex다음과 같이 정의 된 함수를 가정합니다 .
function findHighestZIndex(elem)
{
var elems = document.getElementsByTagName(elem);
var highest = 0;
for (var i = 0; i < elems.length; i++)
{
var zindex=document.defaultView.getComputedStyle(elems[i],null).getPropertyValue("z-index");
if ((zindex > highest) && (zindex != 'auto'))
{
highest = zindex;
}
}
return highest;
}
명확성을 위해 abcoder 사이트에서 일부 코드를 훔칩니다.
var maxZ = Math.max.apply(null,
$.map($('body *'), function(e,n) {
if ($(e).css('position') != 'static')
return parseInt($(e).css('z-index')) || 1;
}));
ES6를 사용하여보다 깔끔한 접근 방식
function maxZIndex() {
return Array.from(document.querySelectorAll('body *'))
.map(a => parseFloat(window.getComputedStyle(a).zIndex))
.filter(a => !isNaN(a))
.sort()
.pop();
}
이 문제를 해결하는 가장 좋은 방법 z-index은 다른 종류의 요소 에 어떤 종류의 es가 사용 되는지에 대한 규칙을 스스로 설정하는 것 입니다. 그런 다음 z-index문서를 다시 살펴보면 사용할 올바른 것을 찾을 수 있습니다.
나는 당신이 관찰하고있는 것이 부두라고 믿습니다. 당신의 완전한 스타일 시트에 접근하지 않고는 물론 믿을 수있는 것을 말할 수 없습니다. 하지만 여기서 실제로 일어난 일은 배치 된 요소 만 z-index.
또한 z-indexes는 스타일 시트에서만 자동으로 할당되지 않습니다. 즉, 다른 z-indexed 요소 가 없으면 다른 z-index:1;모든 요소 위에 위치합니다.
나는 당신이 이것을 직접해야한다고 생각합니다 ...
function findHighestZIndex()
{
var divs = document.getElementsByTagName('div');
var highest = 0;
for (var i = 0; i < divs .length; i++)
{
var zindex = divs[i].style.zIndex;
if (zindex > highest) {
highest = zindex;
}
}
return highest;
}
기본 속성이나 그 밖의 것은 없지만 모든 요소를 반복하고 알아내는 자바 스크립트를 작성할 수 있습니다. 또는 jQuery와 같은 DOM 관리 라이브러리를 사용하는 경우 메서드를 확장 (또는 이미 지원하는지 확인)하여 페이지로드에서 요소 z- 인덱스 추적을 시작한 다음 가장 높은 z- 인덱스를 검색하는 것이 간단 해집니다. 인덱스.
UserScript 중 하나에서 사용하는 ECMAScript 6 구현을 추가하고 싶습니다. 나는 이것을 사용하여 z-index특정 요소 를 정의하여 항상 가장 높게 나타납니다. 연결된 :not선택기를 사용하여 이러한 요소를 제외 할 수 있습니다 .
let highestZIndex = 0;
// later, potentially repeatedly
highestZIndex = Math.max(
highestZIndex,
...Array.from(document.querySelectorAll("body *:not([data-highest]):not(.yetHigher)"), (elem) => parseFloat(getComputedStyle(elem).zIndex))
.filter((zIndex) => !isNaN(zIndex))
);
아래쪽 5 개 줄은 현재 값과 모든 요소의 계산 된 다른 모든 z- 인덱스 highestZIndex사이의 최대 값 을 찾아서 여러 번 실행하고 변수를 반복적으로 업데이트 할 수 있습니다 . 모든 값 이 제외 됩니다. highestZIndexfilter"auto"
나는 최근에 프로젝트를 위해 이것을해야했고, 여기 에서 @Philippe Gerber 의 훌륭한 대답과 @flo 의 훌륭한 대답 (허용되는 대답) 에서 많은 이점을 얻었습니다 .
위에서 언급 한 답변의 주요 차이점은 다음과 같습니다.
- CSS
z-index및 모든 인라인z-index스타일이 모두 계산되며 비교 및 계산을 위해 둘 중 더 큰 스타일을 사용합니다. - 값은 정수를 강요하고, 임의의 문자열 값은 (
auto,static, 등) 무시됩니다.
다음 은 코드 예제에 대한 CodePen이지만 여기에도 포함되어 있습니다.
(() => {
/**
* Determines is the value is numeric or not.
* See: https://stackoverflow.com/a/9716488/1058612.
* @param {*} val The value to test for numeric type.
* @return {boolean} Whether the value is numeric or not.
*/
function isNumeric(val) {
return !isNaN(parseFloat(val)) && isFinite(val);
}
/**
* Finds the highest index in the current document.
* Derived from the following great examples:
* [1] https://stackoverflow.com/a/1118216/1058612
* [2] https://stackoverflow.com/a/1118217/1058612
* @return {number} An integer representing the value of the highest z-index.
*/
function findHighestZIndex() {
let queryObject = document.querySelectorAll('*');
let childNodes = Object.keys(queryObject).map(key => queryObject[key]);
let highest = 0;
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;
}
});
return highest;
}
console.log('Highest Z', findHighestZIndex());
})();#root {
background-color: #333;
}
.first-child {
background-color: #fff;
display: inline-block;
height: 100px;
width: 100px;
}
.second-child {
background-color: #00ff00;
display: block;
height: 90%;
width: 90%;
padding: 0;
margin: 5%;
}
.third-child {
background-color: #0000ff;
display: block;
height: 90%;
width: 90%;
padding: 0;
margin: 5%;
}
.nested-high-z-index {
position: absolute;
z-index: 9999;
}<div id="root" style="z-index: 10">
<div class="first-child" style="z-index: 11">
<div class="second-child" style="z-index: 12"></div>
</div>
<div class="first-child" style="z-index: 13">
<div class="second-child" style="z-index: 14"></div>
</div>
<div class="first-child" style="z-index: 15">
<div class="second-child" style="z-index: 16"></div>
</div>
<div class="first-child" style="z-index: 17">
<div class="second-child" style="z-index: 18">
<div class="third-child" style="z-index: 19">
<div class="nested-high-z-index">Hello!!! </div>
</div>
</div>
</div>
<div class="first-child">
<div class="second-child"></div>
</div>
<div class="first-child">
<div class="second-child"></div>
</div>
<div class="first-child">
<div class="second-child"></div>
</div>
</div>jQuery 사용 :
제공된 요소가 없으면 모든 요소를 확인합니다.
function maxZIndex(elems)
{
var maxIndex = 0;
elems = typeof elems !== 'undefined' ? elems : $("*");
$(elems).each(function(){
maxIndex = (parseInt(maxIndex) < parseInt($(this).css('z-index'))) ? parseInt($(this).css('z-index')) : maxIndex;
});
return maxIndex;
}
z 인덱스가 가장 높은 모든 요소 의 ID 를 표시하려는 경우 :
function show_highest_z() {
z_inds = []
ids = []
res = []
$.map($('body *'), function(e, n) {
if ($(e).css('position') != 'static') {
z_inds.push(parseFloat($(e).css('z-index')) || 1)
ids.push($(e).attr('id'))
}
})
max_z = Math.max.apply(null, z_inds)
for (i = 0; i < z_inds.length; i++) {
if (z_inds[i] == max_z) {
inner = {}
inner.id = ids[i]
inner.z_index = z_inds[i]
res.push(inner)
}
}
return (res)
}
사용법 :
show_highest_z()
결과 :
[{
"id": "overlay_LlI4wrVtcuBcSof",
"z_index": 999999
}, {
"id": "overlay_IZ2l6piwCNpKxAH",
"z_index": 999999
}]
@Rajkeshwar Prasad 의 훌륭한 아이디어에서 영감을 얻은 솔루션 입니다.
/**
returns highest z-index
@param {HTMLElement} [target] highest z-index applyed to target if it is an HTMLElement.
@return {number} the highest z-index.
*/
var maxZIndex=function(target) {
if(target instanceof HTMLElement){
return (target.style.zIndex=maxZIndex()+1);
}else{
var zi,tmp=Array.from(document.querySelectorAll('body *'))
.map(a => parseFloat(window.getComputedStyle(a).zIndex));
zi=tmp.length;
tmp=tmp.filter(a => !isNaN(a));
return tmp.length?Math.max(tmp.sort((a,b) => a-b).pop(),zi):zi;
}
};#layer_1,#layer_2,#layer_3{
position:absolute;
border:solid 1px #000;
width:100px;
height:100px;
}
#layer_1{
left:10px;
top:10px;
background-color:#f00;
}
#layer_2{
left:60px;
top:20px;
background-color:#0f0;
z-index:150;
}
#layer_3{
left:20px;
top:60px;
background-color:#00f;
}<div id="layer_1" onclick="maxZIndex(this)">layer_1</div>
<div id="layer_2" onclick="maxZIndex(this)">layer_2</div>
<div id="layer_3" onclick="maxZIndex(this)">layer_3</div>Array.reduce ()
z-index사용 하는 최상위를 결정하는 또 다른 솔루션은 다음과 같습니다 Array.reduce().
const max_zindex = [...document.querySelectorAll('body *')].reduce((accumulator, current_value) => {
current_value = +getComputedStyle(current_value).zIndex;
if (current_value === current_value) { // Not NaN
return Math.max(accumulator, current_value)
}
return accumulator;
}, 0); // Default Z-Index Rendering Layer 0 (Zero)
라이브러리로 사용할 수있는 다음 코드를 고려하십시오. getMaxZIndex
반응형
'Programing' 카테고리의 다른 글
| 탭 이스케이프 문자? (0) | 2020.11.15 |
|---|---|
| 운영 체제 개발을위한 리소스 (0) | 2020.11.15 |
| Java 6 열거 형에 대한 values ()는 어떻게 구현됩니까? (0) | 2020.11.15 |
| POST 매개 변수 콘텐츠의 최대 크기가 있습니까? (0) | 2020.11.15 |
| POST 매개 변수 콘텐츠의 최대 크기가 있습니까? (0) | 2020.11.15 |