CSS - Appendices - Web Development with jQuery (2015)

Web Development with jQuery (2015)

Part IV. Appendices

Appendix H. CSS

Method

Description

Return Value

CSS

css(property)

Returns the specified CSS property value from the first selected element—for example:
$('div').css('background-color')

String

css(properties)

Sets the specified CSS properties. The properties argument is defined as an object literal of key, value pairs—for example:
$('div').css({
backgroundColor : 'red',
marginLeft : '10px'
});

jQuery

css(property, value)

Sets the specified CSS property value—for example:
$('div').css('background', 'red');

jQuery

CLASS NAMES

addClass()

Adds the specified class name(s) to the selected element(s). Multiple class names are separated by spaces.

jQuery

hasClass(className)

Determines whether the selected element(s) have the specified class name. This method does not support multiple class names at the time of this writing.

Boolean

removeClass(className)

Removes the class name(s) from the selected element(s). Multiple class names are separated by spaces.

jQuery

toggleClass(className)

Adds or removes one or more class names from the selected elements. Multiple class names are separated by spaces.

jQuery

POSITIONING

offset()

Returns the offset position of the first selected element relative to the viewport—for example:
var offset = $('div').offset();
alert('Left: ' + offset.left);
alert('Top: ' + offset.top);

Object

position()

Gets the coordinates of the element relative to the offset parent—for example:
var position = $('div').position();
alert('Left: ' + position.left);
alert('Top: ' + position.top);

Object

HEIGHT AND WIDTH

height()

Returns the pixel height (CSS height, excluding borders and padding) of the first selected element.

Integer

height(value)

Sets the height (CSS height) of the first selected element. If no unit of measurement is provided, px (pixels) is used.

jQuery

innerHeight()

Gets the inner height of the element, including padding, but not the border.

Integer

innerWidth()

Gets the inner width of the element, including padding, but not the border.

Integer

width()

Returns the pixel width (CSS width, excluding borders and padding) of the first selected element.

Integer

width(value)

Sets the width (CSS width) of the first selected element. If no unit of measurement is provided, px (pixels) is used.

jQuery

outerHeight(options)

Returns the offsetHeight (includes the pixel height, borders, and padding) of the first selected element. The options argument is a JavaScript object literal of options. See the “Options” section for more information.

Integer

outerWidth(options)

Returns the offsetWidth (includes the pixel width, borders, and padding) of the first selected element. The options argument is a JavaScript object literal of options. See the “Options” section for more information.

Integer

SCROLLING

scrollLeft()

Gets the horizontal position of the scrollbar for the first selected element.

Integer

scrollLeft(position)

Sets the horizontal position of the scrollbar for each selected element.

jQuery

scrollTop()

Gets the vertical position of the scrollbar for the first selected element.

Integer

scrollTop(position)

Sets the vertical position of the scrollbar for each selected element.

jQuery

JQUERY

$.cssHooks

Used to provide an API for jQuery to describe how a particular CSS property should be handled internally, by jQuery.
$.cssHooks['WebkitBorderRadius'] = {
get : function(element, computed, extra)
{
// Code for getting the CSS property
},
set : function(element, value)
{
// Code for setting the CSS property
}
};