用js/JQuery获取/设置元素属性

1. 用JQuery

获取属性：DOM对象.attr(属性名称）

$(othis).parent().find('#lamp-item').attr('lamp-id');

设置属性：DOM对象.attr(属性名称，属性值）

$(othis).parent().find('#lamp-item').attr('lamp-id','idtest');

操作style属性

style属性很有用，但最大不足是无法通过它来提取到通过外部CSS设置的样式信息，然而在jQuery中，这些都是非常的简单。CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

可以直接利用css()方法获取元素的样式属性

$("p").css("color");  //获取p元素的样式颜色

无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。

也可以直接利用css()方法设置某个元素的单个样式

$("p").css("color","red");  //设置p元素的样式颜色为红色

与attr()方法一样，css()方法也可以同时设置多个样式属性，代码如下：

$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});

如果值是数字，将会被自动转化为像素值。在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，比如上面的代码，如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。总之建议大家加上引号，养成良好的习惯。

如果需要获取某个元素的height属性，则可以通过如下JQuery代码实现：

$(element).css("height");

在jQuery中还有另外一种方法也可以获取元素的高度，即height()。它的作用是取得匹配元素当前计算的高度值(px).height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px。如果要用其他单位（例如em），则必须传递一个字符串..

两者的区别是：css()方法获取的高度值与样式的设置有关，可能会得到“auto”，也可能得到”10px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，并且不带单位。

$("p").height("100px");	//设置p元素的高度值为l00px   
$("p").height("2em");	//设置p元素的高度值为2em

此外，其他style属性的设置还包括offset(),position, scroll() 等。

var position = $("p").position();    //获取p元素的position()   
var left = position.left;    //获取左偏移   
var top = position.top;    //获取右偏移

以上参见这里http://www.nowamagic.net/librarys/posts/jquery/27。

http://www.nowamagic.net/librarys/——简明现代魔法图书馆

2. 用JS

document.getElementById(id).attrName();
document.getElementById(id).attName(attrValue);

这个有个需要注意的是CSS里面很多属性名称是带横杠的，用JS要改成相应的驼峰命名法。比如font-size要变成fontSize。

//但是今天遇到个问题，有些属性是我自己定义的，在定义的时候就用到了横杠，这样在命令中似乎读到横杠就会报错，如何解决？除了在命名时避免横杠和用JQuery方法外？