0

I am trying to learn and make a reference for myself but i can't find correct, enough, and not so confusing information. So tell me how to find the width of these..

Assume there is DOM element with 10px padding all around, border 5px all around, margin 30 px all around, and content that is too long for it so has scroll bars.

Find widths using javascript...

  1. upto Margin.
  2. upto Border.
  3. Inside Border Padding and plus vertical scroll bar if present.
  4. upto padding excluding vertical scrollbar if present.
  5. upto content only that is visible. (no scrollBar, padding, border, margin, extra content)
  6. upto content that's visible and hidden in scrollable area and with padding
  7. upto content that's visible and hidden in scrollable area and with out padding

Javascript as too many unintuitive catches so please make it clear once and for all.

So far I have gotten this:

  1. unknown
  2. element.offsetWidth
  3. unknown
  4. element.clientWidth
  5. unknown ( css width ?)
  6. element.scrollWidth (see below)
  7. unknown

only workarounds that i know are using lots of javascript to get computed values and then calculate all of these manually..but maybe there are builtin functions or better way to find things.

more Problems:

  • scrollWidth includes only left padding..shouldn't it either include both or none or at least have other options that do. LINK
  • box Sizing to border box changes the whole world and every question above needs to be answered again for that. For example for 5 css width property won't be true anymore.
Community
  • 1
  • 1
Muhammad Umer
  • 17,263
  • 19
  • 97
  • 168
  • just create a function that takes an element and adds all the css properties you are referencing by doing `window.getComputedStyle(element, null).getPropertyValue('css-property')` – Nick Jun 17 '14 at 19:02
  • if you know solution to just one of the unknowns then please do so. – Muhammad Umer Jun 18 '14 at 03:03

1 Answers1

0

There is no one function that will solve what you're asking for.

.outerWidth() will give the the size of an element, padding, borders, contained content and all. It will not however give you the margin of the element. Using the .outerWidth(true) parameter will give you the width of the element including the margin.

.innerWidth() will give you the width of the element. It is the total width of the content in the element plus the padding, but not the border,

If for some reason you want to know the difference between the inner and outer widths. Which is pretty much the border width or the difference between the edge of the border and the margins just subtract them from one another.

$widthDif = outerWidth(."Somethng") - .innerWidth('.something');

The inner and outer width function are mirrored and work the exact same for height.

Generally if you use .innerWidth() on something like the main body element it returns the width of the document minus the scroll bar because the scroll-bar is not part of the content view port.

Inside of an element is another story.

Best thing I could find in a google search was another StackOverflow question. Which outline rendering and element to 100% width inside of the scrollable element, getting its width and then deleting the element since it is unneeded. Getting the height of something minus a horizontal scrollbar could be found the same way. However once you have a vertical and horizontal scrollbar at the same time things could/would get complicated because the 100% height or width element could expand beyond what is in the view-able space depending on how the content is rendered into the element with the scrollbars.

Community
  • 1
  • 1
Jem
  • 744
  • 2
  • 7
  • 25