使用脚本根据CSS条件隐藏整个div？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hide Div Example</title>
<style>
  #myDiv {
    width: 200px;
    height: 200px;
    background-color: lightblue;
  }
</style>
</head>
<body>

<div id="myDiv">This is my div content.</div>

<script>
  // 检查条件并隐藏div的函数
  function checkAndHideDiv() {
    var myDiv = document.getElementById('myDiv');
    var conditionElement = document.getElementById('conditionElement'); // 假设有一个元素用于检查条件

    // 假设我们的条件是conditionElement的宽度小于100px
    if (conditionElement.offsetWidth < 100) {
      myDiv.style.display = 'none'; // 隐藏div
    } else {
      myDiv.style.display = ''; // 显示div
    }
  }

  // 初始检查
  checkAndHideDiv();

  // 可以添加事件监听器来响应窗口大小变化或其他事件
  window.addEventListener('resize', checkAndHideDiv);
</script>

</body>
</html>