Getting Started with jquery: CSS, Styles and sizes

jquery contains an easy way to get and set CSS properties for an element:

    //Get CSS Properties    $( "H1"). CSS ("FontSize");//Returns a string such as "19px". Returns a string of "19px".     $( "H1"). CSS ("Font-size");//Also works will also work.     //Set CSS properties.     $( "H1"). CSS ("FontSize","100px");//Setting an individual property. Set individual Properties    //Set multiple properties.     $( "H1"). CSS ({fontSize:"100px",Color:"Red"});

Note the form of the second row of arguments-it is an object that contains multiple attributes. This is a common way to pass multiple parameters to a function, and many of the methods of jquery setting functions accept objects that set multiple values at once.

CSS properties in JavaScript often require a hyphen to be changed to camel-style spelling. For example, a CSS property font-size is used to represent a property name in JavaScript fontSize . However, when .css() a CSS property name is passed in a method like a string, it does not apply-in this case, the form of camel or hyphen will run.

When setting up CSS with an object, CSS properties should be spelled in camel style instead of a hyphen, but in the production code (Production-ready codes) It is not recommended .css() to use as a set function.

Apply CSS classes to set styles

As a fetch function, the .css() method is valuable. However, it is often avoided as a setup function in the generated code, because the information that is typically represented is best kept separate from the JavaScript code. Instead, use classes to write CSS rules that describe a variety of display forms, and then change the class of the elements.

    // 用classes工作。    "h1" );    "big" );    "big" );    "big" );    if"big" ) ) {        ...    }

Classes can also be used to store state information about an element, such as indicating which element is selected.

Size

Jqeury provides a rich method for acquiring and modifying the size and positioning information of an element.

The following code shows a short overview of the ability to get element size in jquery. If you need the full details of the jquery operation element size method, see dimensions documentation on api.jquery.com.

    // 基础的尺寸大小方法。    //设置所有    "h1""50px" );    //获取第一个    "h1" ).width();    //设置所有    "h1""50px" );         //获取第一个    "h1" ).height();    // 返回一个对象，包含第一个    "h1" ).position();

Original address

Getting Started with jquery: CSS, styles, and sizes