CSS Styles API

css.in()

Extracts the CSS style values of the matched DOM elements after applying active stylesheets and resolving any basic computations those values may contain.

  • Accepts arguments as strings and arrays of strings.
    You can pass CSS styles as individual arguments, as an array, or as a string separated by commas or spaces, using "kebab-case", "camelCase", or "snake_case" formats.
    Each value is seen as a new argument.
  • Returns a string if a single argument and a single matched DOM element.
    Returns an object if multiple arguments and a single matched DOM element.
    Returns an array of strings if multiple arguments and a single matched DOM element.
    Returns an array of objects if multiple arguments and multiple matched DOM elements.
    If the CSS style value is missing, it will be null.
Example:
$('body').css.in();
// {'accent-color': 'auto', 'align-content': 'normal', 'align-items': 'normal', ...}

$('body').css.in('margin');
// '0px'

$('body').css.in('margin-left');
// '0px'

$('body').css.in('backgroundColor');
// 'rgb(255, 255, 255)'

$('body').css.in('background');
// 'rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box'

$('body').css.in('background-color', 'marginLeft');
// {'background-color': 'rgb(255, 255, 255)', marginLeft: '0px'}

$('body').css.in(['background-color', 'margin-left']);
// {'background-color': 'rgb(255, 255, 255)', 'margin-left': '0px'}

$('body').css.in('backgroundColor, margin_left');
// {backgroundColor: 'rgb(255, 255, 255)', margin_left: '0px'}

$('body').css.in('background_color margin-left');
// {background_color: 'rgb(255, 255, 255)', 'margin-left': '0px'}

$('div ?').css.in();
// [{...}, {...}, {...}]

$('div ?').css.in('background-color');
// ['rgb(255, 255, 255)', 'rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0)']

$('div ?').css.in('background-color', 'margin');
// [{'background-color': 'rgb(255, 255, 255)', margin: '0px'}, {'background-color': 'rgba(0, 0, 0, 0)', margin: '0px 0px 0px 10px'}, {'background-color': 'rgba(0, 0, 0, 0)', margin: '0px'}]