Awesome

dimensions

jquery/jquery based dimensions getters and setters (innerHeight, innerWidth, height, width, outerHeight and outerWidth)

install

component install ramitos/dimensions

example

var dimensions = require('dimensions')
var css = require('css')

var el = document.querySelector('#my_el')

css(el, {
  width: '100px',
  height: '150px',
  padding: '10px',
  border: '1px solid black',
  margin: '5px',
  'box-sizing': 'border-box'
})

dimensions(el).innerWidth() // => '120px'
dimensions(el).innerHeight() // => '170px'
dimensions(el).width() // => '100px'
dimensions(el).height() // => '150px'
dimensions(el).outerWidth() // => '122px'
dimensions(el).outerWidth(true) // => '132px'
dimensions(el).outerHeight() // => '172px'
dimensions(el).outerHeight(true) // => '182px'

dimensions(el).width(110)
dimensions(el).height(160)

dimensions(el).innerWidth() // => '130px'
dimensions(el).innerHeight() // => '180px'
dimensions(el).width() // => '110px'
dimensions(el).height() // => '160px'
dimensions(el).outerWidth() // => '132px'
dimensions(el).outerWidth(true) // => '142px'
dimensions(el).outerHeight() // => '182px'
dimensions(el).outerHeight(true) // => '192px'

css(el, {
  'box-sizing': 'content-box'
})

dimensions(el).innerWidth() // => '130px'
dimensions(el).innerHeight() // => '180px'
dimensions(el).width() // => '110px'
dimensions(el).height() // => '160px'
dimensions(el).outerWidth() // => '132px'
dimensions(el).outerWidth(true) // => '142px'
dimensions(el).outerHeight() // => '182px'
dimensions(el).outerHeight(true) // => '192px'

api

.innerWidth() / .innerHeight()

Gets the width/height without border and margin

.width([value]) / .height([value])

Gets the width/height without border, margin and padding

Sets the width/height by applying css rules into the element.

Note that .width([value])/.height([value]) will always return and set the content-width / content-height in conformity with the box-sizing value. This part of the implementation is not in parity with jQuery.

.outerWidth([withMargin]) / .outerHeight([withMargin])

Gets the width/height with border and padding. Optionally, also with margin

license

MIT