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方法外?