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

JavaScript
1

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??

2

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: 24%20AM

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

I used the above code, but if I console.log it it still gives me undefined…

4

if you want to fill up the entire parent div, you can set your child banner css: width: 100% to fill up.
No need to use JS to detect parent div width to fill up your child banner.

5 
.description {
  // your previous styling
  width: 100%;
  text-align: center;
}

.card:hover .description {
  // using bottom up animation I thought it would be better
  bottom: 0px;
}

you can see full text description filled up with its parent div. happy coding!

6

That.

And since it’s a “floating” element, you’ll probably want to give it an absolute position.

As for the:

Matching elements by className will give you an array of all elements found, you have to use a single selector.
Also, keep in mind that there are also contentWidth and scrollWidth (same for height). They all work a bit differently, make sure you’re using the one that solves your problem.

1 Like
7

Thanks for the suggestion! I think that the banner appear from the bottom is easier to achieve.