How do I get the length of a div using javascript? (manipulating the dom)

[mrchow19910319]

for example, I have a div that had a non-specific length, it varies depends on the view port width.
how do I use JS to extract the length of the div at any time??

 

https://codepen.io/zhouxiang19910319/pen/JeLzJw?editors=1010

 

 

for example, I want to know the length of projects images being displayed on the right.
so that I know the banner I created on them should take up how much space horizontal wise.
I want the banner to fill up the entire parent div like this: 

 

[bleedblue]

I believe your looking for something like this

$("#yourDivId").outerWidth()

 

[mrchow19910319]

13 minutes ago, bleedblue said:

I believe your looking for something like this

$("#yourDivId").outerWidth()

 

https://codepen.io/zhouxiang19910319/pen/JeLzJw?editors=1011

 

I used vanilla js instead of jquery. but still it gives me undefined.

why? (you can check the link above)

 

var bannerWidth = document.getElementsByClassName('card').offsetWidth;

 

[bleedblue]

10 minutes ago, mrchow19910319 said:

https://codepen.io/zhouxiang19910319/pen/JeLzJw?editors=1011

 

I used vanilla js instead of jquery. but still it gives me undefined.

why? (you can check the link above)

 

var bannerWidth = document.getElementsByClassName('card').offsetWidth;

 

 

getElementByClassname() returns a collection of elements. You'd have to access them 1 by 1 like so

var bannerWidth = document.getElementsByClassName("card")[0].offsetWidth;

 

Buuuut, when manipulating DOM elements through JS, it's best practice to use id's

var bannerWidth = document.getElementById("bootstrap_documentationd").offsetWidth;