如何在JavaScript和CSS中定位videoContainer的子div并修改样式？

你的代码可能因DOM未加载完成导致无法定位元素，或是选择器可靠性不足，以下是几种有效解决方法：

方法一：使用querySelector精准定位（推荐） #

querySelector可直接通过CSS选择器定位目标子div，语法直观且可靠性高：

// 等待DOM完全加载后执行代码
document.addEventListener('DOMContentLoaded', () => {
  // 匹配videoContainer下的直接子div
  const targetDiv = document.querySelector('#videoContainer > div');
  
  if (targetDiv) {
    // 方式1：逐个修改样式属性（不会覆盖原有其他行内样式）
    targetDiv.style.width = '150px';
    targetDiv.style.height = '200px';
    
    // 方式2：完全替换行内样式（会清除原有所有style）
    // targetDiv.setAttribute('style', 'width: 150px; height: 200px;');
  }
});

方法二：基于children属性优化原代码 #

若想沿用原有思路，需确保DOM加载完成并增加存在性判断：

document.addEventListener('DOMContentLoaded', () => {
  const videoContainer = document.getElementById('videoContainer');
  
  // 确保容器存在且有子元素
  if (videoContainer && videoContainer.children.length > 0) {
    const targetDiv = videoContainer.children[0];
    targetDiv.style.width = '150px';
    targetDiv.style.height = '200px';
  }
});

关键注意点 #

• DOM加载时机：若脚本放在<head>标签中，浏览器执行脚本时<div id="videoContainer">还未渲染，会导致getElementById返回null，必须用DOMContentLoaded事件等待DOM加载完成。
• 样式修改方式：用element.style.xxx修改单个样式属性，不会覆盖元素原有的其他行内样式；若用setAttribute('style', ...)会完全替换所有行内样式，可根据需求选择。

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