target child div of ID in JavaScript and CSS-CodePudding

I'm having difficulty targeting the child div of id="videoContainer" and changing its style

<div id="videoContainer">
  <div style="width: 640px; height: 360px">   <------- target this
    <video
      src=""
      preload="auto"
      autoplay=""
      style="width: 100%; height: 100%"
    ></video>
  </div>
</div>


const videoContainer = document.getElementById('videoContainer')
document.getElementById('videoContainer').children?.[0]?.setAttribute("style", `width: 150px; height: 200px;`);

CodePudding user response：

I would do it by CSS, but if you have to use JS:

<div id="videoContainer">
  <div style="width: 640px; height: 360px">   <------- target this
    <video
      src=""
      preload="auto"
      autoplay=""
      style="width: 100%; height: 100%"
    ></video>
  </div>
</div>


const videoContainer = document.getElementById("videoContainer");
videoContainer.style.width = "640px";
videoContainer.style.height = "360px";

CodePudding user response：

You can use querySelector with direct childs > and first :first-child like this:

const videoContainer = document.querySelector('#videoContainer > div:first-child')
videoContainer.style.width =  "150px"
videoContainer.style.height = "200px"
console.log(videoContainer.style.width)

<div id="videoContainer">
  <div style="width: 640px; height: 360px">   <!------- target this -->
   <video src="//samplelib.com/lib/preview/mp4/sample-5s.mp4"  controls="" disablepictureinpicture="" preload="none" poster="https://samplelib.com/lib/preview/mp4/sample-5s.jpg" controlslist="nodownload"></video>
  </div>
</div>

CodePudding user response：

You can use in this manner>>>>

document.getElementById("your_element_id").style.property = new style

CodePudding user response：

You can target it by adding an id/class and pointing like this in the css #Idname or .Classname like:

file.html:

<div id="videoContainer">
  <div id="idname"  style="width: 640px; height: 360px">   
    //....
  </div>
</div>

file.css:


#idname {
//css
}
.classname {
//css
}
```

or still with css like 
```
#videoContainer > div {
}
```

or with js:

```
document.getElementById("videoContainer").firstChild; // or
document.getElementById("videoContainer").childNodes[0]; //or
document.querySelector('#videoContainer > div');

```