Home >Web Front-end >JS Tutorial >jQuery CSS() method changes existing CSS style_jquery
JQuery Getting Started Example: Use the CSS() method to change the existing CSS style sheet. The css() method is versatile in use. One of them accepts two input parameters: style attribute and style value, separated by commas. For example, to change the link color, you can write the code like this:
$("#61dh a").css('color','#123456'); //选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 //.css(‘color','#123456');表示把颜色设为'#123456'
If you need to change multiple style attributes, you can define attribute variables first and then assign them 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 above code first defines a CSS style attribute variable "mycss", which is similar to creating an external CSS file, and then assigns the attribute to the DIV with the ID '#result' through the css() method.
In addition, the css() method provided by jQuery can also view the css attribute value of an element. For example, to view the color of a link, the code is as follows:
$("#61dh a").css("color")
You will find that this is similar to the first example, but here only one parameter (style attribute) is passed.
The last thing I want to introduce is how to set the link style (for example: color) after the mouse is crossed. You need to use the jQuery event class method - hover(). It is worth noting that the hover() method needs to define two functions, one when the mouse moves over; the other after the mouse moves over. The specific method is as follows:
$("#61dh a").css('color','#123456'); $("#61dh a").hover(function(){ $(this).css('color','#999'); }, function(){ $(this).css('color','#123456'); }); //hover()方法的两个函数使用用逗号分隔
Perhaps you are smart and have noticed that this method is not simple. Haha, in fact, the jQuery hover() method is not used to change CSS styles. In practical applications, it is recommended to use the method of adding/removing CSS to change the link style when the mouse is crossed.