javascript - 如何在纯 JavaScript 中检查元素的颜色是否等于其背景颜色(渲染后)？

Question

在纯 JavaScript 中检查被相同颜色/背景颜色隐藏的元素的最简单方法是什么？

示例:div 中白色背景的白色文本。我想检查元素的渲染颜色/背景颜色，因此即使应用了外部 CSS 样式，它也能正常工作。

此外，没有可用的 jQuery，因此必须使用纯 JavaScript 来完成。

Answer 1

获取目标坐标，然后从该点找到下一个最上面的元素

1. 您可以使用element.getClientBoundingRect()获取目标元素的顶部和左侧偏移位置。然后使用window.getComputedStyle(element)获取其计算出的颜色。
2. 暂时删除作为最顶层元素的目标元素。在我的示例中，我通过更改目标元素的 z-index 使其低于堆叠上下文中的其他元素来实现此目的。还有其他方法。
3. 然后使用 document.elementFromPoint(left, top)获取该位置的下一个最顶层元素。然后使用window.getComputedStyle(element)获取其计算出的背景颜色以进行比较。
4. 将目标元素恢复到最顶部位置。

var myButton = document.getElementById('myButton');

myButton.onclick = findHiddenText;

function findHiddenText() {
    var textElem = document.getElementById('myText'),
        textOffset = textElem.getBoundingClientRect(),
        textColor = getStyle(textElem, 'color'),
        textZindex = getStyle(textElem, 'zIndex');
    
    textElem.style.zIndex = '-1'; 
    
    var bgElem = document.elementFromPoint(textOffset.left, textOffset.top),
        bgColor = getStyle(bgElem, 'backgroundColor');
    
    if (textColor === bgColor) {
        var msgElem = document.createElement('p'),
            msgText = document.createTextNode('There be hidden treasure in the sea.');
        msgElem.appendChild(msgText);
        document.getElementById('box2').appendChild(msgElem);
        textElem.style.textShadow = '0 1px 1px #000';
    };
    textElem.style.zIndex = textZindex;
}

function getStyle(elem, prop) {
    if (elem.currentStyle) {
        return elem.currentStyle[prop];
    }
    return document.defaultView.getComputedStyle(elem, null)[prop]; 
}

#box1 {
    width: 100%;
    height: 100px;
    background-color: lightseagreen;
}
#box2 {
    width: 100%;
    height: 100px;
    background-color: sandybrown;
}
#myText {
    color: lightseagreen;
    position: relative;
    top: -25px;
}
p {
    margin: 0;
    text-align: center;
}

<div id="box1"></div>
<div id="box2">
    <p id="myText">Treasure.</p>
</div>
<button id="myButton" type="button">Find buried treasure</button>

注意:如果返回元素的背景颜色是透明的，这将不起作用。在这种情况下，我想您可以编写一个函数来检查透明度，然后暂时从 DOM 中删除透明元素或更改它们的堆叠顺序，并使用 .elementFromPoint() 重复该过程，直到找到一个元素具有定义的背景颜色。进行比较后，您可以恢复删除/移动的元素。