target child div of ID in JavaScript and CSS

Question

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;`);

`document.querySelector('#videoContainer > div')` allows you to target the child `div` directly — GrafiCode, Nov 02 '22 at 10:50

aloisdg · Accepted Answer · 2022-11-02T11:17:18.150

2

You can use querySelector with the direct child operator > (and maybe first with :first-child if you have more than one child div) like this:

const videoContainer = document.querySelector('#videoContainer > div')
videoContainer.style.width =  "150px"
videoContainer.style.height = "200px"
console.log("videoContainer width is", videoContainer.style.width)

/* what I think you need too */
#videoContainer video {
  object-fit: contain;
}

<div id="videoContainer">
  <div style="width: 640px; height: 360px">   <!------- target this -->
   <video src="//samplelib.com/lib/preview/mp4/sample-5s.mp4"       
    preload="auto"
    autoplay=""
    style="width: 100%; height: 100%"></video>
  </div>
</div>

object-fit: contain will force you video to scale into its parent. You may want to use cover or else. For more information, read simulate background-size:cover on <video> or <img>

edited Nov 02 '22 at 11:17

answered Nov 02 '22 at 10:50

aloisdg

22,270
6
85
105

`first-child` is not required here – Cédric Nov 02 '22 at 10:55
@Cédric in the [MRE] it is not needed, but OP mays need it in real life – aloisdg Nov 02 '22 at 10:56
1

Refactor, I'd like to up vote this, but you have added complexity. – Madison Courto Nov 02 '22 at 11:01
Alright move `first-child` into comment – aloisdg Nov 02 '22 at 11:05
@Joseph I dont have the undefined issue in my [MRE]. Can you edit your post to add a code to showcase this problem? If it is a whole new problem, feel free to create a new question. – aloisdg Nov 02 '22 at 11:08
On reflection, I think this is a good answer. You must ensure that OP can pull out what he needs without the complexity. nice, refactor. – Madison Courto Nov 02 '22 at 11:18
@MadisonCourto if you have any idea to improve the answer again, feel free to comment :) – aloisdg Nov 02 '22 at 11:19
I tried a few methods, and I think you covered it mate. – Madison Courto Nov 02 '22 at 11:20
@aloisdg. weird. the `videoContainer` is null – Joseph Nov 02 '22 at 11:21
@Joseph, I'm not getting that. – Madison Courto Nov 02 '22 at 11:24
I tried console.log this `const videoContainer = document.querySelector('#videoContainer > div')` but its value is null – Joseph Nov 02 '22 at 11:24
https://codepen.io/mcourto/pen/eYKZpzQ?editors=1111 it's 100% not null if you're doing this via dev tools, it will show null till it's called.... – Madison Courto Nov 02 '22 at 11:25
@aloisdg. setTimeout did the trick – Joseph Nov 02 '22 at 11:36
@Joseph - Why are you using setTimeout? – Yogi Nov 02 '22 at 11:42
@Yogi. probably because the video element is still being loaded? – Joseph Nov 02 '22 at 11:45
@Joseph the video is not relevant here because we are not targeting the video. We select the container not the video. If you have a new problem, create a new question. – aloisdg Nov 02 '22 at 11:46

habby · Answer 2 · 2022-11-02T11:43:10.937

1

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" class="classname" style="width: 640px; height: 360px">   
    //....
  </div>
</div>

file.css:

#idname {
    width: 640px;
    height: 360px;
}
//OR
.classname {
    width: 640px;
    height: 360px;
}

or still with css like:

#videoContainer > div {
    width: 640px;
    height: 360px;
}

or with js:

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

videoContainer.style.width = '640px';
videoContainer.style.height = '360px';

edited Nov 02 '22 at 11:43

answered Nov 02 '22 at 10:53

habby

52
8

Welcome to SO; you're on the right track, but including the OP's original code and solution in your answer is far more beneficial to them and you in terms of acceptance. – Madison Courto Nov 02 '22 at 11:10
1

Thank you very much, ill edit the answer to better suite the OP question – habby Nov 02 '22 at 11:25

score 0 · Answer 3 · answered Nov 02 '22 at 11:28

Here's how it can be done. Hope that answers your question.

document.getElementById("videoContainer").children[0].style.background="red";

<div id="videoContainer">
  <div style="width: 640px; height: 360px">  
    <h1>Your Content </h1>
  </div>
</div>

score -1 · Answer 4 · answered Nov 02 '22 at 11:00

-1

You can use in this manner>>>>

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

answered Nov 02 '22 at 11:00

Nikhil Pawar

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 05 '22 at 09:40

target child div of ID in JavaScript and CSS

4 Answers4