CODEWITHSUNDEEP
javascripthtmlcssecmascript-6
Joseph
Joseph

Reputation: 7755

target child div of ID in JavaScript and CSS

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

Upvotes: 0

Views: 286

Answers (4)

habby
habby

Reputation: 76

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';

Upvotes: 1

Supercool
Supercool

Reputation: 560

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>

Upvotes: 0

aloisdg
aloisdg

Reputation: 23531

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>

Upvotes: 2

Nikhil Pawar
Nikhil Pawar

Reputation: 1

You can use in this manner>>>>

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

Upvotes: -1

Related Questions