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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
js 居中漂浮广告
Mar 21 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
Javascript获取表单名称(name)的方法
Apr 02 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
解决layui laydate 时间控件一闪而过的问题
Sep 28 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 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&MYSQL服务器配置说明
2006/10/09 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
Laravel5.3+框架定义API路径取消CSRF保护方法详解
2020/04/06 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python文件路径操作方法总结
2020/12/21 Python
高一自我鉴定
2013/12/17 职场文书
关于逃课的检讨书
2014/01/23 职场文书
动员大会主持词
2014/03/20 职场文书
小班上学期评语
2014/05/05 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
入股协议书范本
2014/11/01 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
怎么用Python识别手势数字
2021/06/07 Python