Jquery工作常用实例——CSS函数使用说明及实例讲解

jQuery 拥有五种用于 CSS 操作的重要函数:

  • $(selector).css(name,value) :为匹配元素设置样式属性的值
  • $(selector).css({properties}) :为匹配元素设置多个样式属性(这种最常用)
  • $(selector).css(name):获得第一个匹配元素的样式属性值
  • $(selector).height(value):设置匹配元素的高度
  • $(selector).width(value):设置匹配元素的宽度

实例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>改变HTML元素的CSS属性</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#button").click(function(){
			$("p").css({"background-color":"#F4FDA4","font-weight":"bold","padding":"5px","font-size":"14px"});
		})
	})
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<input id="button" type="button" value="Click me" />
</body>
</html>

 如上,当我们单击"Click me"时,所有的P段落标签内容的css将改变为预定值,执行前是这样的:

This is a paragraph.

This is another paragraph.

执行后将变成这样:

This is a paragraph.

This is another paragraph.

这就是Jquery CSS函数的使用方法,更多的还要多练尝试,不过这个都比较简单,用多了自然就顺手了。

你可能感兴趣的:(Jquery工作常用实例)