How to Find the Width of a Div Using Vanilla JavaScript

How to find the width of a div using vanilla JavaScript?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

Get DIV width and height in javascript

Since you're already using jQuery, you can just do:

var width;

if (need == 1) {
   width = $("#web").width();
} else {
   width = $("#set").width();
}

How to find the width of a form as a percentage of the client window in vanilla JS?

If you're looking for the percentage of the entire client window (as opposed to the percentage of the offsetParent() as in the linked thread) you could use a similar technique, just divide by the document.body.clientWidth instead of the offsetParent().width().

In vanilla Javascript:

var client = document.body.clientWidth;
var form = document.getElementById('form1').clientWidth;
alert(((form/client)*100)+'%');

Alternatively, if you're after the size of the client window as a percentage of the available screen resolution, you can add this to the above and note the second alert:

var screen = window.screen.availWidth;
alert(((client/screen)*100)+'%');

Pure js. Get width of element and use it in a scroll

document.getElementsByClassName('text-image-item') returns a NodeList, which in this case contains 4 nodes. The NodeList does not have an offsetWidth. Only individual elements have a width.

You will need to pick one of the nodes and use its width instead. You can do this by picking a valid index:

document.getElementsByClassName('text-image-item')[0].offsetWidth

For more information about NodeList, check MDN

How do I watch the element size on load AND resize of the window with vanilla JS?

That's because you calculate the computedHeight only once in the page load. Every time you the resize handler is firing, computedHeight is the same value.

You need to re-calculate it in every resize. Something like this:

function resizeMain() {
  let main = document.getElementById('main');
  let fullscreen = window.innerHeight;
  let headerHeight = document.getElementById('navHeader').offsetHeight;
  let newsletterHeight = document.getElementById('newsletter').offsetHeight;
  let footerHeight = document.getElementById('footer').offsetHeight;
  let addHeight = headerHeight + newsletterHeight + footerHeight;
  let computedHeight = fullscreen - addHeight + 7;
  document.getElementById('main').style.cssText = `min-height:${computedHeight}px;`;
}

calculateHeight();
window.addEventListener('load', resizeMain);

Although, I'm not sure it's a wise approach because for each resize you'll do some heavy calculation. You may want to use some kind of debounce function.

Getting the width of child element pure javascript

Both getElementsByClassName and getElementsByTagName returns an array of objects, so you need to access the actual element by its index then call its methods/properties

window.onload = function () {
    var project = document.getElementsByClassName('project-box')[0];
    var img = project.getElementsByTagName('img')[0];
    alert(img.clientWidth);
};

Demo: Fiddle

---

Related Topics