Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery based dimensions getters and setters (innerHeight, innerWidth, height, width, outerHeight and outerWidth)
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
src
test
.gitignore
.jshintrc
.tern-project
component.json
license
package.json
readme.md

readme.md

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

Something went wrong with that request. Please try again.