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也可以写成驼峰式fontSizeif($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();                                                   //切换元素的可见状态

jquery系列教程2-style样式操作全解相关推荐

js系列教程12-浏览器存储全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
jquery系列教程5-动画操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
jquery系列教程4-事件操作全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
jquery系列教程3-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
jquery系列教程1-选择器全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...
js系列教程7-DOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
jquery系列教程6-ajax的应用全解
点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...
js系列教程6-BOM操作全解
全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...

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

jquery中的style样式全解：

jquery系列教程2-style样式操作全解相关推荐

最新文章

热门文章