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

最新推荐文章于 2024-07-18 13:52:01 发布

weixin_33836874

最新推荐文章于 2024-07-18 13:52:01 发布

阅读量102

点赞数

文章标签： xhtml javascript python ViewUI

原文链接：https://my.oschina.net/adamboy/blog/28194

版权

2019独角兽企业重金招聘Python工程师标准>>>

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函数的使用方法，更多的还要多练尝试，不过这个都比较简单，用多了自然就顺手了。

转载于:https://my.oschina.net/adamboy/blog/28194