0

Hey guys i was going through the modal.js plugin , and i have a problem with the following line of code : 

var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth

The above line can be found on git too.

Where is offsetWidth and clientWidth coming from , they don't seem to be declared anywhere in the plugin and also i checked the MDN documentation and they don't seem to be names of any methods or functions , So what exactly is offsetWidth and clientWidth ??

Also Why is that is that while appending to the body element and removeing the element from the body tag are the syntax different ? 

this.$body[0].removeChild(scrollDiv);

What the [0] ?? can't the syntex , just be : 

this.$body.removeChild(scrollDiv);

if i console.log this.$body , i get 

{ 0: <body.modal-open>, context: <body.modal-open>, length: 1 }

but if i console.log this.$body[0] , i get :

<body class="modal-open">.

I would really appreciate if somebody can give me a short explanation .

Thank you.

Alexander.

Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174
  • 1
    When I googled `offsetwidth` and `clientwidth` both came back with MDN as the first result. https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth – James Montagne Feb 24 '15 at 16:41

1 Answers1

1

Answer for question about offsetWidth and clientWidth

The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

You can read about both in mdn.

Answer for question about $body.

$body is a jQuery instance object, so it has own interface with own properties and methods. It contain html native element, when i say native i mean dom node. $body - jquery element, $body[0] - html element.

Good explanation about jquery object:

A jQuery object is an array-like object that contains DOM element(s). A jQuery object can contain multiple DOM elements depending on the selector you use.

This information taken from this question.

Community
  • 1
  • 1
Farkhat Mikhalko
  • 3,565
  • 3
  • 23
  • 37