css

Adding/removing/checking a class

// our target is all elements which have 'information' class
var target = $l('.information');

$l.css.addClass(target, 'hide');
console.log($l.css.hasClass(target, 'hide')); // returns true

$l.css.removeClass(target, 'hide');
console.log($l.css.hasClass(target, 'hide')); // returns false

Toggle a class

Usage: $l.css.toggle(element, className)

var target = $l.id('element'); // the element with id="element" attribute
$l.css.toggle(target, 'hide');

Setting/getting CSS attributes

var target = $l.id('element');

// setting property, first sample
$l.css.setProperty(target, 'text-align', 'center');

// setting property, second sample
$l.css.setProperty(target, { fontSize: '50px', color: 'red' });

// getting property
console.log($l.css.getProperty(target, 'text-align')); // prints center

Showing an element with CSS transitions

Usage: $l.css.show(element)

var target = $l.id('element');
$l.css.show(target);

Hiding an element with CSS transitions

Usage: $l.css.hide(element)

var target = $l.id('element');
$l.css.hide(target);

Setting a custom CSS transition

Usage: $l.css.setTransition(element, transition)

var target = $l.id('element');

// first sample
$l.css.setTransition(target, 'color');
$l.css.setProperty(target, 'color', 'red');

// second sample
var target2 = document.body;
$l.css.setTransition(target2, ['background-color 5s ease', 'font-size']);
$l.css.setProperty(
    target2,
    {
        'background-color': 'silver',
        'font-size': '25px'
    }
);

Dimensions

Warning! not supported for inline elements!.

Returns the height and width values of the elements. Do you have any experience about the CSS box model? Please review the following photo;

Available methods;

• .top(element)
• .left(element)
• .height(element)
• .innerHeight(element)
• .outerHeight(element, includeMargin)
• .width(element)
• .innerWidth(element)
• .outerWidth(element, includeMargin)

.top(element)

Returns value of absolute top position.

var target = $l.id('element');
console.log($l.css.top(target));

.left(element)

Returns value of absolute left position.

var target = $l.id('element');
console.log($l.css.left(target));

.height(element)

Returns value of height without padding, border and margin.

var target = $l.id('element');
console.log($l.css.height(target));

.innerHeight(element)

Returns the sum of height and padding (bottom and top) value, without border and margin.

var target = $l.id('element');
console.log($l.css.innerHeight(target));

.outerHeight(element, includeMargin)

Returns the sum of height, padding (bottom and top) and border (bottom and top) value. Margin (bottom and top) value is optional. Margin use when includeMargin equal to true.

var target = $l.id('element');

// without margin values
console.log($l.css.outerHeight(target));

// with bottom and top margin values
console.log($l.css.outerHeight(target, true));

.width(element)

Returns value of width without padding, border and margin.

var target = $l.id('element');
console.log($l.css.width(target));

.innerWidth(element)

Returns the sum of width and padding (left and right) value, without border and margin.

var target = $l.id('element');
console.log($l.css.innerWidth(target));

.outerWidth(element, includeMargin)

Returns the sum of width , padding (left and right) and border (left and right) value. Margin (left and right) value is optional. Margin use when includeMargin equal to true.

var target = $l.id('element');

// without margin values
console.log($l.css.outerWidth(target));

// with left and right margin values
console.log($l.css.outerWidth(target, true));