原生JS和jQ总结--样式

一、【获取样式】
——JS
1、行内样式可以使用style来获取，如obj.style.width;
2、使用offesetXXX…….，但是会包含边框和padding值，存在bug；
2、style只能获取内联样式，获取不到外部样式和嵌入式样式,offesetXXX又有缺陷，因此要用getComputedStyle方法，但是，该方法在IE8以及更早的版本中没有实现，但是IE中每个元素有自己的currentStyle属性，使用方法如下：
·getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算后的样式，此方法有2个参数，第一个参数为要获取计算样式的元素，第二个参数可以是null、空字符串、伪类(如:before,:after)，这两个参数都是必需的。如：window.getComputedStyle(obj, null).width;
·currentStyle属性：每个具有style属性的元素还有一个currentStyle属性。这个属性是CSSStyleDeclaration的实例，包含当前元素全部计算后的样式。如： obj.currentStyle.width;

这篇博客对于这几个概念有比较好的解释：http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

所以，最好把获取样式/属性的方法封装起来（传入对象和需要获取的属性名）：

function getStyle(obj,attr)
    {
     if (obj.currentStyle)
     {
      return obj.currentStyle[attr];
     }
     else
     {
      return getComputedStyle(obj,false)[attr];
     }
    }

——jQ
$(selector).css(“propertyname”);
w3c上的通过jQ设置样式的汇总列表【属性采用中间加短横杠/驼峰式的写法】：http://www.w3school.com.cn/jquery/jquery_ref_css.asp
jQ获取样式一般和设置类似，不加属性值是获取，加上属性值可以设置。
·$(selector).css(“color”)；//获取颜色
·$(selector).offset().top ; //有top 和 left两个值；
·$(selector).position().left;//有top 和 left两个值；
·$(selector).scrollLeft() //获取滚动条的水平位置;
·$(selector).height() //获取高度
·$(selector).width() //获取宽度

二、【设置样式】
——JS
obj.style.property=”值”
w3c上的通过js设置样式的汇总列表【属性采用驼峰式的写法】：http://www.w3school.com.cn/jsref/dom_obj_style.asp#positioning

·obj.style.color=”red”; //改变颜色
·obj.style.src=”…….”; //改变图片地址
·obj.style.left=”100px”
·obj.style.visibility=”hidden”/”visible” // 隐藏或显示对象
…….

另
也可以通过setAttribute()方法设置
element.setAttribute(“attributename”,attributevalue)

——JQ
$(selector).css(“propertyname”,”value”);
w3c上的通过jQ设置样式的汇总列表【属性采用中间加短横杠/驼峰式的写法】：http://www.w3school.com.cn/jquery/jquery_ref_css.asp
·$(selector).css(“background-color”,”yellow”); //改变背景颜色
·$(selector).css({“background-color”:”yellow”,”font-size”:”200%”});//同时设置多个属性值；（注意写法）
·$(selector).height(50);//设置高度，有参数表示设置；
·$(selector).width(50) //设置宽度
·$(“div”).scrollLeft(100); //
其中设置left和top时有三种方法：
·通过设置css():
$(selector).css(“top”,”0px”); //跟第三种其实一样
·通过设置offset：
$(selector).offset(value);eg.$(“p”).offset({top:100}); //参数写在{}内
·通过设置position：
$(“form”).css(“position”,”absolute”); //这是设置元素的定位
$(“form”).css(“top”,”0px”); //这是给定位的元素设置位置
或：$(‘.form’).css({‘position’:’abosolute’,’top’:’0px’})；

另：
jQ也可使用attr()来返回或设置属性值，
·$(selector).attr(attribute)：一个参数，返回属性；
·$(selector).attr(attribute,value):两个参数，设置属性；
·$(selector).attr(attribute,function(index,oldvalue)):通过函数来设置属性；
·`$(selector).attr({attribute:value, attribute:value …})：一次性设置多个属性的值。\$(“img”).attr({width:”50”,height:”80”});

对比
css()和attr()两个方法都可以返回或者设置属性，css()对应的是style里面的样式属性，而attr()还可以设置元素本身的属性，如title等，并且attr()权重比css()大，会覆盖css()的设置。