Home > Web Front-end > JS Tutorial > jQuery CSS() method changes existing CSS style_jquery

jQuery CSS() method changes existing CSS style_jquery

WBOY
Release: 2016-05-16 16:39:01
Original
1147 people have browsed it

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'
Copy after login

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);
Copy after login

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")
Copy after login

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()方法的两个函数使用用逗号分隔
Copy after login

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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template