Usage example of setting element style using jQuery_jquery

The example in this article describes the use of jQuery to set element styles. Share it with everyone for your reference. The specific analysis is as follows:

CSS is a part of the 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 to elements. Here we mainly introduce how jQuery sets the style of the page. Including adding, deleting, dynamic switching, etc.

1. Add and delete css categories.

Copy code The code is as follows:

$(function() {
//Add multiple CSS categories at the same time
$("img").addClass("css1 css2");
});

For example, the above code adds two styles, css1 and css2, to the img element

removeClass corresponds to the addClass method, and the examples will not be repeated here.

2. Dynamically switch between categories.

Many times, depending on the user's operation status, you want the style of some elements to switch between a certain category, sometimes addClass() category, sometimes removeClass() category, Jq provides a direct toggleClass(name) to do this Similar operations.

Copy code The code is as follows:

$(function() {
$("p").click(function() {
$(this).toggleClass("css1");
})
});

The above code implements continuous switching of css1 styles when clicking on the P element. The toggleClass(name) method can only set one css category. Multiple css cannot be switched.

3. Get and set styles directly.

Exactly similar to the attr() method, jQuery provides the css() method to directly obtain and set the style of an element, such as using css(name) to obtain the style value of a certain style. Set multiple styles at the same time through the css (properties) list, and set a certain style of the element through css (name, value).

For example: modify the color mark by setting the mouseover and mouseout events to trigger css(name,value).

Copy code 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. And compatible with various browsers.

Modify the above example and set the transparency value of the p element through mouse events.

Copy code The code is as follows:

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

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

Copy code The code is as follows:

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

Expresses whether the css attribute of the last li contains the css1 class. and

Copy code The code is as follows:

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

The code has exactly the same effect.

Looking at the jQuery source code, the hasClass method is the is() method.

Copy code The code is as follows:

hasClass: function(selector) {
return this.is("." selector);
}

I hope this article will be helpful to everyone’s jQuery programming.