JQuery entry: CSS, style, and size

JQuery entry: CSS, style, and size

JQuery provides an easy way to obtain and set the CSS attributes of elements:

// Get the CSS attribute $(h1 ).css (fontSize); // Returns a string such as 19px. Return a string 19px. $(H1 2.16.css (font-size); // Also works. It Also works. // Set the CSS attributes. $(H1 2.16.css (fontSize, 100px); // Setting an individual property. Set individual attributes // set multiple attributes. $(H1 2.16.css ({fontSize: 100px, color: red });

Note the form of the parameter in the second line-it is an object containing multiple attributes. This is a common method to pass multiple parameters to a function. Many jQuery setting methods accept objects that can set multiple values at a time.

CSS attributes in JavaScript usually need to replace the font size with the camper spelling. For example, CSS attributesfont-sizeWhen used as an attribute name in JavascriptfontSize. However.css()When a CSS attribute name is passed like a string, it is not used in this way-in this case, whether it is a camper spelling or a font size, it will run.

When setting CSS with an object, CSS attributes should be spelled in a camper style instead of a font size. However, it is not recommended in production-ready code..css()As the setting function.

Apply CSS classes to set styles

As a function,.css()Methods are very valuable. However, it is often avoided as a setting function in the generated ready code, because the information normally presented is best kept separate from the JavaScript code. Instead, use classes to write CSS rules that describe Multiple display forms, and then change the class of the element.

// Use classes to work. Var h1 = $ (h1); h1.addClass (big); h1.removeClass (big); h1.toggleClass (big); if (h1.hasClass (big )){...}

Classes can also be used to store status information about an element, for example, indicating which element is selected.

Size

JQeury provides a variety of methods to obtain and modify the size and positioning information of an element.

The following code provides a brief overview of the element size acquisition function in jQuery. For details about the element size method in jQuery, see dimensions documentation on api.jquery.com.

// Basic size method. // Set all

The width of the element. $ (H1). width (50px); // obtain the first one The width of the element. $ (H1). width (); // set all The height of the element. $ (H1). height (50px); // obtain the first one The width of the element. $ (H1). height (); // returns an object that contains the first Similar to the positioning information of its "parent element offset (positioning. $ (H1). position ();