如何使用JavaScript读取CSS元素宽度 实现宽度达标后隐藏指定元素

现有代码存在的问题 #

• 选择器写法错误：document.querySelector("Disk1") 无法匹配到对应元素，若Disk1是类名需写为.Disk1，是ID需写为#Disk1
• getElementsByClassName返回的是类数组的HTMLCollection集合，不能直接调用.style修改样式，需要取出集合内的单个元素再操作
• 代码仅在页面加载时执行1次，若后续VarDisk1的宽度发生动态变化（比如窗口缩放、内容更新），无法实时检测触发隐藏逻辑

修复后的实现方案 #

如果需要宽度变化时自动触发状态更新，推荐用ResizeObserver监听元素尺寸变化，实现代码如下：

<script>
    // 修正选择器，根据实际元素的类/ID替换选择器内容
    const VarDisk1 = document.querySelector("#Disk1"); // 假设Disk1是ID，类名的话改为.Disk1
    const VarDisk2 = document.querySelector(".Disk2"); // 直接取单个Disk2元素，需要匹配多个的话可以用querySelectorAll再遍历

    // 封装宽度检测逻辑
    function checkDiskWidth() {
        const disk1Width = VarDisk1.offsetWidth;
        if (disk1Width > 70) {
            VarDisk2.style.display = "none";
        } else {
            // 宽度小于等于70时恢复显示，不需要的话可以删掉这段逻辑
            VarDisk2.style.display = "block";
        }
    }

    // 页面加载时先执行一次判断
    checkDiskWidth();

    // 监听VarDisk1的尺寸变化，动态触发判断
    const resizeObserver = new ResizeObserver(checkDiskWidth);
    resizeObserver.observe(VarDisk1);
</script>

如果你的场景里VarDisk1的宽度只会在窗口缩放时变化，也可以用监听window.resize事件替代ResizeObserver。

内容的提问来源于stack exchange，提问作者Nikoloz Mchedlishvili