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 19 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
JavaScript对象属性操作实例解析
Feb 04 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
搜索引擎技术核心揭密
2006/10/09 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP中文乱码解决方案
2015/03/05 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python设置环境变量的原因和方法
2019/06/24 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
Oracle快照(snapshot)
2015/03/13 面试题
智乐游戏测试笔试题
2014/05/21 面试题
历史教育专业个人求职信
2013/12/13 职场文书
普通员工辞职信
2014/01/17 职场文书
公司合作意向书
2014/04/01 职场文书
电教室标语
2014/06/20 职场文书
小学英语课教学反思
2016/02/15 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers