(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的值获取字符串
var left = $('#test').css('left');
var top = $('#test').css('top');
但是这一种获取方式得到的是一个字符串,不能直接获取像素值
②、通过 position() 方法获取像素值
var left = $('#test').position().left;
var top = $('#test').position().top;
jquery获取left和top值,一般都用第二种方法,因为我们直接获取了left和top的像素值,可以直接用于计算,免去了通过函数praseInt转换的麻烦,如果要设置css的left和top属性,可以看jquery设置css。
区别 var left = $('#test').offset().left;
见另一随笔。
(2)Color
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[]);
for (var i = ; i <= ; ++i) {
parts[i] = parseInt(parts[i]).toString();
if (parts[i].length == ) parts[i] = '' + parts[i];
}
var hexString = parts.join(''); // "0070ff"
或者下面这个funciton
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("" + parseInt(x).toString()).slice(-);
}
6 return "#" + hex(rgb[]) + hex(rgb[]) + hex(rgb[]);
}