jquery系列教程2-style样式操作全解

全栈工程师开发手册 （作者：栾鹏）

快捷链接：

jquery系列教程1-选择器全解

jquery系列教程2-style样式操作全解

jquery系列教程3-DOM操作全解

jquery系列教程4-事件操作全解

jquery系列教程5-动画操作全解

jquery系列教程6-ajax的应用全解

jquery系列教程7-自定义jquery插件全解

jquery系列教程8-jquery插件大全

jquery中的style样式全解：

$cr = $("#id");  //选中元素获元素列表

通过attr函数操作样式

$cr.attr("src");                                      //attr(name)表示读取属性
$cr.attr("src","test.jpg");                          //attr(key,value)表示设置属性
$cr.attr({src:"test.jpg",alt:"test image"});        //attr(properties)同时设置多个属性
$cr.attr("title",function(){                         //attr(key,fn)通过函数获取值
    return this.src;
});
$cr.removeAttr("src");                                //删除属性

通过class函数操作样式

var label_class = $cr.attr("class");                 //获取样式
$cr.attr("class","high");                             //设置样式
$cr.addClass("high1");                                 //追加样式
$cr.removeClass("high1");                              //移除样式
$cr.removeClass("high1 high");                        //同时移除多个样式
$cr.toggle("high1");                                   //对样式参数有无进行切换
$cr.hasClass("high1");                                 //判断是否含有指定样式，实际调用的为is(".high1");

通过css函数操作样式

$cr.css("color");                                               //css(name)读取style样式
$cr.css("color","red");                                         //css(key,value)设置style样式，等价于cr.style.color="red"
$cr.css({'fontSize':'30px','backgroundColor':'#888888'});  //css(properties)同时设置多个样式。在带有-的样式属性中如font-size，添加引号后，可以写成font-size也可以写成驼峰式fontSize

if($cr.css("height")==$cr.height()){                           //css(key,fn)通过函数计算样式值，height()获取的高度与样式无关，是元素在页面中的实际高度，不带单位。css("height")获取的高度与样式有关，可能会得到auto结果，也有可能得到10px字符串
    $cr.height(100);                                            //设置高度为数字，默认单位为px
    $cr.height("10em");
}

通过样式专有函数操作样式

var width = $cr.width();                                        //读取宽高相关样式：height、width、innerHeight、innerWidth、outerHeight、outerWidth
$cr.width(800);                                                 //设置宽高相关样式：height、width、innerHeight、innerWidth、outerHeight、outerWidth
var offset = $cr.offset();                                      //偏移类。获取元素在当前视窗中的相对偏移，只对可见元素有效，包含offset.left和offset.top两个属性
var position = $cr.position();                                  //位置类。获取元素相对于最近的一个position属性设置为relative或absolute的祖父节点的相对偏移，包含position.left和position.top两个属性
$cr.scrollTop();                                                //获取元素的滚动条距顶端的距离
$cr.scrollLeft(300);                                            //获取元素的滚动条距左端的距离，也可以通过参数设置滚动左边的距离
$cr.show();                                                      //表示display:block,
$cr.hide();                                                      //表示display:none;
$cr.toggle();                                                   //切换元素的可见状态