有没有办法确定elementA是否在另一个元素“后面”,因此elementA对用户不可见?
显然可以使用stacking context,但问题是我们不知道应该关注哪些元素。因此,我们必须遍历DOM中的所有元素并对多个元素执行堆叠上下文比较。这在性能方面并不好。
这是一个jsfiddle。那么有没有办法确定#hidden-element对用户不可见,因为另一个元素是在它上面呈现的?
https://jsfiddle.net/b9dek40b/5/
HTML:
<div id="covering-element"></div>
<div>
<div id="hidden-element"></div>
</div>
样式:
#covering-element {
position: absolute;
width: 100px;
height: 100px;
background: darksalmon;
text-align: center;
}
#hidden-element {
width: 25px;
height: 25px;
background: deeppink;
}
答案 0 :(得分:1)
我们的解决方案是使用几个东西来确定元素是否可见而不是任何其他元素。这是我们使用的方法。
visibility:hidden
和display:none
https://jsfiddle.net/k591Lbwu/27/
HTML
<div id="covering-element"></div>
<div>
<div id="hidden-element"></div>
</div>
<button style="margin-top:100px">Check visibility</button>
CSS
#covering-element {
position: absolute;
width: 100px;
height: 100px;
background: darksalmon;
text-align: center;
}
#hidden-element {
width: 25px;
height: 25px;
background: deeppink;
}
的JavaScript
document.querySelector('button').addEventListener('click', function() {
const element = document.getElementById('hidden-element')
alert('Visible = '+isVisible(element))
})
function isVisible(element) {
if(!isVisibleByStyles(element)) return false
if(isBehindOtherElement(element)) return false
return true
}
function isVisibleByStyles(element) {
const styles = window.getComputedStyle(element)
return styles.visibility !== 'hidden' && styles.display !== 'none'
}
function isBehindOtherElement(element) {
const boundingRect = element.getBoundingClientRect()
// adjust coordinates to get more accurate results
const left = boundingRect.left + 1
const right = boundingRect.right - 1
const top = boundingRect.top + 1
const bottom = boundingRect.bottom - 1
if(document.elementFromPoint(left, top) !== element) return true
if(document.elementFromPoint(right, top) !== element) return true
if(document.elementFromPoint(left, bottom) !== element) return true
if(document.elementFromPoint(right, bottom) !== element) return true
return false
}