Question

我有一个动态的Web表单，我想检测一个元素是否可见；如果它是我的另一个元素我尝试了以下尝试，但是这种方法无法稳定运行； 即该元素并不总是隐藏。有更好的技术吗？

setInterval( myValidateFunction2, 1000);

function myValidateFunction2 () {   
    var inElgbl =  document.getElementById('field_52_116');
    if (typeof(inElgbl) != 'undefined' && inElgbl != null)
    {
        document.getElementById('field_52_24').style.display = "none";
    }   
};

默认情况下为display: none;，但是如果它变成display: block;，则可能会变成display: block;，我想display: none;我的另一个div元素。

Answer 1

如果元素占用了文档中的空间，则将其视为可见。对于大多数目的，这正是您想要的。试试这个：

setInterval( myValidateFunction2, 1000);

function myValidateFunction2 () {   
    var inElgbl =  document.getElementById('field_52_116');
    if (inElgbl.offsetWidth <= 0 && inElgbl.offsetHeight <= 0)
    {
        document.getElementById('field_52_24').style.display = "none";
    }   
};

Answer 2

可能最稳定的方法是使用DOM Mutation Observer并将其设置为监视可能会引起问题的元素的文档或文档部分。

在下面的示例中，我将设置一个观察器以观察最初为空的div，并在设置好之后，动态添加我们应该在监视中使用的元素对于。您会看到该元素没有显示出来。

// Select the node that will be observed for mutations 
var targetNode = document.getElementById('parent');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
function callback(mutationsList, observer) { 
  // We only need to test to see if node is truthy, which it will be if it exists
  if (document.getElementById('field_52_116')){
    document.getElementById('field_52_24').style.display = "none";
    console.log("Node detected! Removing....");
  } 
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// So, we'll add the node to test
let newNode = document.createElement("div");
newNode.textContent = "I'm here so the other node should be hidden!";
newNode.id = "field_52_116";
targetNode.appendChild(newNode);

// Later, you can stop observing if needed
// observer.disconnect();

<div id="parent"></div>
<div id='field_52_24'>ELement to hide</div>

如果页面上存在div元素，则隐藏其他元素

2 个答案: