本文深入解析jQuery中用于CSS操作的三种重要函数，并通过实例展示如何使用这些函数来修改网页元素的样式。
jQuery 拥有三种用于 CSS 操作的重要函数：
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)
1.函数 css(name,value) ：为所有匹配元素的给定 CSS 属性设置值。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
//页面载入时执行
$(document).ready(function(){
//将p标签的背景颜色设置为红色
$("p").css("background-color","red");
//将id为f1的标签的字体大小设置成50px，颜色设置为蓝色
$("#f1").css("font-size","50px").css("color","blue");
});
</script>
</head>
<body>
<p>
<font id="f1">
jquery的css函数的使用
</font>
</p>
</body>
</html>
效果：
2.函数 css({properties})： 同时为所有匹配元素的一系列 CSS 属性设置值。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
//页面载入时执行
$(document).ready(function(){
//将p标签的背景颜色设置为红色，字体大小50
$("p").css({"background-color":"red","font-size":"50px"});
//将id为f1标签的字体颜色设置为蓝色，加粗
$("#f1").css("color","blue").css("font-weight","bold");
});
</script>
</head>
<body>
<p>
<font id="f1">
jquery的css函数的使用
</font>
</p>
</body>
</html>
效果：
3.函数 css(name)： 返回指定的 CSS 属性的值
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
//页面载入时执行
$(document).ready(function(){
//获得css样式信息
alert("p标签的css--> background-color:"+$("p").css("background-color")
+" font-size:"+$("p").css("font-size")
+" \nid为f1标签的css--> color:"+$("#f1").css("color")
+" font-weight:"+$("#f1").css("font-weight")
);
});
</script>
</head>
<body>
<p style="background-color:red;font-size:50px">
<font id="f1" style="color:blue;font-weight:bold">
jquery的css函数的使用
</font>
</p>
</body>
</html>
$(selector).css(name,value)
$(selector).css({properties})
$(selector).css(name)
1.函数 css(name,value) ：为所有匹配元素的给定 CSS 属性设置值。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
//页面载入时执行
$(document).ready(function(){
//将p标签的背景颜色设置为红色
$("p").css("background-color","red");
//将id为f1的标签的字体大小设置成50px，颜色设置为蓝色
$("#f1").css("font-size","50px").css("color","blue");
});
</script>
</head>
<body>
<p>
<font id="f1">
jquery的css函数的使用
</font>
</p>
</body>
</html>
效果：
2.函数 css({properties})： 同时为所有匹配元素的一系列 CSS 属性设置值。
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
//页面载入时执行
$(document).ready(function(){
//将p标签的背景颜色设置为红色，字体大小50
$("p").css({"background-color":"red","font-size":"50px"});
//将id为f1标签的字体颜色设置为蓝色，加粗
$("#f1").css("color","blue").css("font-weight","bold");
});
</script>
</head>
<body>
<p>
<font id="f1">
jquery的css函数的使用
</font>
</p>
</body>
</html>
效果：
3.函数 css(name)： 返回指定的 CSS 属性的值
例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
//页面载入时执行
$(document).ready(function(){
//获得css样式信息
alert("p标签的css--> background-color:"+$("p").css("background-color")
+" font-size:"+$("p").css("font-size")
+" \nid为f1标签的css--> color:"+$("#f1").css("color")
+" font-weight:"+$("#f1").css("font-weight")
);
});
</script>
</head>
<body>
<p style="background-color:red;font-size:50px">
<font id="f1" style="color:blue;font-weight:bold">
jquery的css函数的使用
</font>
</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
