如何通过父元素ID选择子video元素并添加/移除属性？

修正元素选择逻辑 #

你原来的代码存在两个关键问题：一是选中父元素的方法错误，二是没有获取到子元素video。正确的选择逻辑是：

1. 用document.getElementById("video-section-desktop")选中父div（它的id是video-section-desktop，这是最精准的选择方式）
2. 通过父元素的querySelector("video")方法，直接找到内部的第一个video标签，不需要给video加任何额外的id或类

完整可运行代码 #

// 定义核心处理函数
function toggleVideoAutoplay() {
    // 选中父div
    const parentDiv = document.getElementById("video-section-desktop");
    // 获取父div里的video元素
    const videoElement = parentDiv.querySelector("video");
    
    // 根据视口宽度处理属性
    if (window.innerWidth < 900) {
        // 视口小于900px时移除autoplay
        videoElement.removeAttribute("autoplay");
        // 可选：如果需要暂停正在播放的视频，加上这行
        videoElement.pause();
    } else {
        // 视口大于等于900px时恢复autoplay
        videoElement.setAttribute("autoplay", "autoplay");
        // 可选：如果需要自动播放，加上这行
        videoElement.play();
    }
}

// 页面加载完成后执行一次
window.onload = toggleVideoAutoplay;
// 监听窗口大小变化，确保响应式适配
window.addEventListener("resize", toggleVideoAutoplay);

代码说明 #

• querySelector("video")：在父元素范围内查找第一个video标签，完美适配你无法修改video属性的需求
• 绑定resize事件：避免用户调整窗口后逻辑不生效，保证视口变化时自动更新video状态
• 可选的暂停/播放逻辑：移除autoplay后，视频可能还在播放，加上pause()可以直接暂停；恢复autoplay后，play()能触发自动播放

进阶需求：替换移动端视频 #

如果你需要在移动端加载完全不同的视频（而不只是修改autoplay），可以用下面的代码替换：

function toggleVideoSourceAndAutoplay() {
    const parentDiv = document.getElementById("video-section-desktop");
    const videoElement = parentDiv.querySelector("video");
    
    if (window.innerWidth < 900) {
        videoElement.removeAttribute("autoplay");
        videoElement.pause();
        // 替换为移动端专属视频地址
        videoElement.src = "mobile-video.mp4";
    } else {
        videoElement.setAttribute("autoplay", "autoplay");
        // 恢复桌面端视频地址
        videoElement.src = "desktop-video.mp4";
        videoElement.play();
    }
}

window.onload = toggleVideoSourceAndAutoplay;
window.addEventListener("resize", toggleVideoSourceAndAutoplay);

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