jquery系列教程2-style样式操作全解
2017-08-06 08:52
507 查看
全栈工程师开发手册 (作者:栾鹏)
快捷链接:
jquery系列教程1-选择器全解
jquery系列教程2-style样式操作全解
jquery系列教程3-DOM操作全解
jquery系列教程4-事件操作全解
jquery系列教程5-动画操作全解
jquery系列教程6-ajax的应用全解
jquery系列教程7-自定义jquery插件全解
jquery系列教程8-jquery插件大全
通过attr函数操作样式
通过class函数操作样式
通过css函数操作样式
通过样式专有函数操作样式
快捷链接:
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(); //切换元素的可见状态
相关文章推荐
- jquery系列教程3-DOM操作全解
- jquery系列教程4-事件操作全解
- jquery系列教程5-动画操作全解
- jQuery基础教程之DOM操作-样式操作
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- 【原创】【2】rich editor系列教程。了解document.execommand操作,保存丢失的range,实时反馈样式给工具栏
- Jquery系列-Jquery操作样式
- jQuery 教程 (四) 使用jQuery操作元素的属性与样式 .NET
- Selenium-Webdriver系列教程(2)———浏览器的简单操作
- 推荐40个非常优秀的 jQuery 插件和教程【系列三】
- [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- 用JQuery操作元素的style属性
- 从零开始学习jQuery(4)-使用jQuery操作元素的属性与样式
- 使用jQuery操作元素的属性与样式
- DOM系列---DOM操作样式
- 40款非常棒的 jQuery 插件和制作教程【系列四】
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
- 前端系列之jQuery(jQueryDOM操作)
- jQuery-1.9.1源码分析系列(九) CSS操作