The jQuery CSS of method changes the existing CSS style

  • 2020-03-30 03:44:42
  • OfStack

Example of introduction to jQuery: using CSS() methods to change existing CSS stylesheets. CSS() methods are used in a variety of ways. One of them accepts two input parameters: the style attribute and the style value, separated by a comma. For example, to change the color of a link, write code like this:


$("#61dh a").css('color','#123456'); 
//The selector '$("#61dh a")' represents all the links under the element with ID' #61dh'.
//.css( ' color','#123456'); That means set the color to zero '#123456'

If you need to change more than one style property, you can first define the property variable and then assign it directly to the CSS () method.


var mycss = { 
background: '#EEE', 
width: '478px', 
margin: '10px 0 0', 
padding: '5px 10px', 
border: '1px solid #CCC' 
}; 
$("#result").css(divcss);

The code above first defines a CSS style property variable "mycss", similar to creating an external CSS file, and then assigns the property to a DIV with the ID '#result' through the CSS () method.

In addition, the CSS () method provided by jQuery can also see the CSS attribute value of an element. For example, to see the color of the link, the code is as follows:


$("#61dh a").css("color")

You will see that this is similar to the first example, but only one parameter (the style property) is passed.

The last thing I want to show you is how to set the style of a link after a mouse stroke (for example, color), using the jQuery event class method -hover (). It's worth noting that the hover() method requires two functions to be defined. The other is the mouse after the stroke. Specific methods are as follows:


$("#61dh a").css('color','#123456'); 
$("#61dh a").hover(function(){ 
$(this).css('color','#999'); 
}, 
function(){ 
$(this).css('color','#123456'); 
}); 
//hover() The two functions of the method are separated by a comma 

You've probably noticed that this isn't a neat method, but the jQuery hover() method isn't used to change CSS styles. In practice, it is recommended to use the add/remove CSS method to change the style of mouseover links.


Related articles: