How to Use jQuery to set element styles _ jquery-js tutorial

This article describes how to use jQuery to set element styles. The example shows how jQuery sets the style of a page, including Tips for adding, deleting, and dynamically switching pages, for more information about how to use jQuery to set element styles, see the following example. Share it with you for your reference. The specific analysis is as follows:

Css is a part of a page that cannot be separated. jQuery also provides some practical methods related to css. In the previous article, addClass () was used to add css styles for elements. This section describes how to set the Page Style in jQuery. Including adding, deleting, and dynamic switching.

1. add and delete css categories.

The Code is as follows:

$ (Function (){
// Add multiple CSS classes at the same time
$ ("Img"). addClass ("css1 css2 ");
});

For example, the above Code adds css1 and css2 styles to the img element.

RemoveClass corresponds to the addClass method, which is not repeated here.

2. dynamically switch between categories.

Most of the time, based on the user's operation status, you want to switch the style of some elements between a certain category, sometimes addClass () category, and sometimes removeClass () category, jq provides a direct toggleClass (name) for similar operations.

The Code is as follows:

$ (Function (){
$ ("P"). click (function (){
$ (This). toggleClass ("css1 ");
})
});

The code above enables continuous switching of the css1 style when the P element is clicked. The toggleClass (name) method can only set one css category. You cannot switch between multiple css.

3. Get and set the style directly.

Similar to the attr () method, jQuery provides the css () method to directly obtain and set the style of elements. For example, you can use css (name) to obtain the style value of a certain style. Through the css (properties) List, colleagues can set multiple styles and set certain styles of elements through css (name, value.

For example, you can set the mouse mouseover and mouseout events to trigger css (name, value) to modify the color tag.

The Code is as follows:

$ (Function (){
$ ("P"). mouseover (function (){
((This).css ("color", "red ");
});
$ ("P"). mouseout (function (){
((This).css ("color", "black ");
});
});

The css method provides the opacity attribute. Compatible with various browsers.

As modified in the preceding example, you can set the transparency value of the p element through the mouse event.

The Code is as follows:

$ (Function (){
$ ("P"). mouseover (function (){
Certificate (this).css ("opacity", "0.5 ");
});
$ ("P"). mouseout (function (){
Certificate (this).css ("opacity", "1 ");
});
});

In addition, the hasClass (name) method is provided in css to determine whether a certain css category is set for an element. Returns a Boolean value. For example:

The Code is as follows:

$ ("Li: last"). hasClass ("css1 ")

Shows whether the last css attribute of li contains the css1 class. And

The Code is as follows:

$ ("Li: last"). is (". css1 ")

The code works exactly the same.

View jQuery source code. The hasClass method is the is () method.

The Code is as follows:

HasClass: function (selector ){
Return this. is ("." + selector );
}

I hope this article will help you with jQuery programming.