Style properties

These methods get and set CSS-related properties of elements.

css

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.

Get CSS property value

jQuery

var color = element.css('color');

Vanilla JS

var color = getComputedStyle(element).color;

Set single element CSS property value

jQuery

element.css('color', 'yellow');

Vanilla JS

element.style.color = 'yellow';

Set CSS property value for the set of elements

jQuery

elements.css('color', 'yellow');

Vanilla ES6+

elements.forEach(x => x.style.color = 'yellow');

Vanilla ES5

elements.forEach(function(element) {
    element.style.color = 'yellow';
});

width

Get the current computed width for the first element in the set of matched elements or set the width of every matched element.

Get element width

jQuery

var width = element.width();

Vanilla JS

var width = parseInt(getComputedStyle(element).width);

Set element width

jQuery

element.width(500);

Vanilla JS

element.style.width = '500px';

height

Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

Get element height

jQuery

var height = element.height();

Vanilla JS

var height = parseInt(getComputedStyle(element).height);

Set element height

jQuery

element.height(500);

Vanilla JS

element.style.height = '500px';

innerWidth

Get the current computed inner width (including padding but not border) for the first element in the set of matched elements or set the inner width of every matched element.

Get element inner width

jQuery

var width = element.innerWidth();

Vanilla JS

var width = element.clientWidth;

Set element inner width

jQuery

element.innerWidth(500);

Vanilla JS

var width = parseInt(getComputedStyle(element).width);
var space = element.clientWidth - width;
element.style.width = (500 - space) + 'px';

innerHeight

Get the current computed inner height (including padding but not border) for the first element in the set of matched elements or set the inner height of every matched element.

Get element inner height

jQuery

var height = element.innerHeight();

Vanilla JS

var height = element.clientHeight;

Set element inner height

jQuery

element.innerHeight(500);

Vanilla JS

var height = parseInt(getComputedStyle(element).height);
var space = element.clientHeight - height;
element.style.height = (500 - space) + 'px';

outerWidth

Get the current computed width for the first element in the set of matched elements, including padding and border.

Get element outer width

jQuery

var width = element.outerWidth();

Vanilla JS

var width = element.offsetWidth;

Set element outer width

jQuery

element.outerWidth(500);

Vanilla JS

var width = parseInt(getComputedStyle(element).width);
var space = element.offsetWidth - width;
element.style.width = (500 - space) + 'px';

outerHeight

Get the current computed height for the first element in the set of matched elements, including padding and border.

Get element outer height

jQuery

var height = element.outerHeight();

Vanilla JS

var height = element.offsetHeight;

Set element outer height

jQuery

element.outerHeight(500);

Vanilla JS

var height = parseInt(getComputedStyle(element).height);
var space = element.offsetHeight - height;
element.style.height = (500 - space) + 'px';

scrollTop

Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

Get element vertical scroll position

jQuery

var top = element.scrollTop();    

Vanilla JS

var top = element.scrollTop;

Set element vertical scroll position

jQuery

element.scrollTop(100);

Vanilla JS

element.scrollTop = 100;

scrollLeft

Get the current horizontal position of the scroll bar for the first element in the set of matched elements or set the horizontal position of the scroll bar for every matched element.

Get element horizontal scroll position

jQuery

var left = element.scrollLeft();    

Vanilla JS

var left = element.scrollLeft;

Set element horizontal scroll position

jQuery

element.scrollLeft(100);

Vanilla JS

element.scrollLeft = 100;

position

Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

jQuery

var position = element.position();

Vanilla JS

var position = {
    top: element.offsetTop,
    left: element.offsetLeft
};

offset

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Get element offset

jQuery

var offset = element.offset();

Vanilla JS

var rect = element.getBoundingClientRect();
var offset = {
    top: rect.top + document.body.scrollTop,
    left: rect.left + document.body.scrollLeft
};

Set element offset

jQuery

element.offset({
    top: 100,
    left: 100
});

Vanilla JS - fixed position

element.style.top = '100px';
element.style.left = '100px';

Vanilla JS - absolute or relative position

var rect = element.parentElement.getBoundingClientRect();
element.style.top = (100 - rect.top - document.body.scrollTop) + 'px';
element.style.left = (100 - rect.left - document.body.scrollLeft) + 'px';
shopify traffic stats