JQuery中操作Css样式的方法


Posted in Javascript onFebruary 12, 2014
//1、获取和设置样式
$("#tow").attr("class")获取ID为tow的class属性
$("#two").attr("class","divClass")设置Id为two的class属性。
//2、追加样式
$("#two").addClass("divClass2")为ID为two的对象追加样式divClass2
//3、移除样式
$("#two").removeClass("divClass")移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")移除多个样式。
//4、切换类名
$("#two").toggleClass("anotherClass") //重复切换anotherClass样式
//5、判断是否含有某项样式
$("#two").hasClass("another")==$("#two").is(".another");
//6、获取css样式中的样式
$("div").css("color") 设置color属性值. $(element).css(style)
//设置单个样式
$("div").css("color","red")
//设置多个样式
$("div").css({fontSize:"30px",color:"red"})
$("div").css("height","30px")==$("div").height("30px")
$("div").css("width","30px")==$("div").height("30px")
//7.offset()方法
//它的作用是获取元素在当前视窗的相对偏移,其中返回对象包含两个属性,即top和left 。
//注意:只对可见元素有效。
var offset=$("div").offset();
var left=offset.left;         //获取左偏移
var top=offset.top;        //获取右偏移
//8、position()方法
//它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性即top和left。
//9、scrollTop()方法和scrollLeft()方法
$("div").scrollTop();        //获取元素的滚动条距顶端的距离。
$("div").scrollLeft();         //获取元素的滚动条距左侧的距离。
//10、jQuery中的 toggle和slideToggle 方法,都可以实现对一个元素的显示和隐藏。区别是:
//toggle:动态效果为从右至左。横向动作。
//slideToggle:动态效果从下至上。竖向动作。
//比如想实现一个树由下至上收缩的动态效果,就使用slideToggle就ok了。
$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性
Javascript 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
深入了解javascript 数组的sort方法
Jun 01 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 #Javascript
js判断设备是否为PC并调整图片大小
Feb 12 #Javascript
Jquery Uploadify上传带进度条的简单实例
Feb 12 #Javascript
js弹出div并显示遮罩层
Feb 12 #Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Feb 12 #Javascript
jquery实现网页查找功能示例分享
Feb 12 #Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 #Javascript
You might like
Oracle Faq(Oracle的版本)
2006/10/09 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
Yii2 ActiveRecord多表关联及多表关联搜索的实现
2016/06/30 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python中datetime常用时间处理方法
2015/06/15 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python 图像平移和旋转的实例
2019/01/10 Python
Django 查询数据库并返回页面的例子
2019/08/12 Python
Python切图九宫格的实现方法
2019/10/10 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
Python多进程编程常用方法解析
2020/03/26 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
党员岗位承诺书
2014/03/25 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
幼儿园教师求职信
2015/03/20 职场文书