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实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 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
php四种基础算法代码实例
2013/10/29 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
2010/07/24 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
微信小程序之分享页面如何返回首页的示例
2018/03/28 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
js实现全选和全不选
2020/07/28 Javascript
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
python 为什么说eval要慎用
2019/03/26 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
如何基于python操作excel并获取内容
2019/12/24 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
2014年大学生就业规划书
2014/04/04 职场文书
国庆节演讲稿
2014/05/27 职场文书
党员评议思想汇报
2014/10/08 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
教师教育教学随笔
2015/08/15 职场文书
深入浅析Redis 集群伸缩原理
2021/05/15 Redis
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript