jquery第十二期：CSS式样
日期：2014-05-16 浏览次数：20533 次
jquery第十二期：CSS样式
每次点击都会变换颜色，从黑到红再到黑。
有关jquery CSS的使用，其参数主要有三种
1.要访问的属性名称
如：$("p").css("color");
2.要设置为样式属性的名/值对
如 ：$("p").css({ color: "#ff0011", background: "blue" });
3.属性名,属性值(在版本1.4加入的)
$("p").css("color","red");
4.我们主要介绍第四种
(1):属性名
(2):此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。
我们举一个例子来演示一下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>表单操作</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function()
{
$("#btn").click(function()
{
$("#abc").css({
color:function(index,value){
if("rgb(255, 0, 0)"==value) return "black";
else return "red";
}
});
});
});
</script>
</head>
<div id="abc" style="color:red">aaaa</font></div>
<input type="button" id="btn" value="changeColor">
<body>
</body>
</html>
每次点击都会变换颜色，从黑到红再到黑。
5.当然这样每次都调用css显得有些麻烦，jquery为我们封装好了一些常用的方法，以height方法举例：
设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。
以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
