jQuery中动画常用的样式获取并改变方法-

（1）Top 和 left　

　　经常要用到jquery获取对象的位置，jquery top left,jquery css left是相对于父级元素中第一个position为relative或absolute的元素靠左边的距离，jquery top left，jquery css left等要熟练运用

　　对left和top的解释：

　　　　值为auto : 无特殊定位，根据HTML定位规则载文档流中分配；
　　　　值为length :由浮点数字和单位标识符组成的长度值 | 百分数。必须定义position属性值为absolute或者relative此取值方可生效；

　　①、通过jQuery获取css的值获取字符串

1 var left = $(\'#test\').css(\'left\');
2 var top = $(\'#test\').css(\'top\');

　　　　但是这一种获取方式得到的是一个字符串，不能直接获取像素值

　  ②、通过 position() 方法获取像素值

 

1 var left = $(\'#test\').position().left;
2 var top = $(\'#test\').position().top;

 

　　jquery获取left和top值，一般都用第二种方法，因为我们直接获取了left和top的像素值，可以直接用于计算，免去了通过函数praseInt转换的麻烦，如果要设置css的left和top属性，可以看jquery设置css。

　　区别  var left = $(\'#test\').offset().left;       

　　见另一随笔。

 

（2）Color

1 var color = $(\'#test\').css("color");

　　使用该方法返回的是rgb(65, 136, 251);

　　用下面方法转换为“#xxxxxx”:

　　

 var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.
 
 var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); // parts now should be ["rgb(0, 70, 255", "0", "70", "255"]
 
 delete (parts[0]);
  for (var i = 1; i <= 3; ++i) {
 　　parts[i] = parseInt(parts[i]).toString(16);
 　　if (parts[i].length == 1) parts[i] = \'0\' + parts[i];
　}
  var hexString = parts.join(\'\'); // "0070ff"

 

　　或者下面这个funciton

1 function rgb2hex(rgb) {
2 　　rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
3 　　function hex(x) {
4 　　　　return ("0" + parseInt(x).toString(16)).slice(-2);
5 　　}
6　　　　 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
7 }