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 input 数字验证代码
Jul 30 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
Vue.js学习示例分享
Feb 05 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
微信小程序选择图片控件
Jan 19 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
世界收音机发展史
2021/03/01 无线电
一个PHP日历程序
2006/12/06 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
javascript轻量级模板引擎juicer使用指南
2014/06/22 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
Python3访问并下载网页内容的方法
2015/07/28 Python
django框架自定义用户表操作示例
2018/08/07 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
高中生学习生活的自我评价
2013/10/09 职场文书
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
旅游管理毕业生自荐信
2013/11/05 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
寒假家长评语大全
2014/04/16 职场文书
天地会口号
2014/06/17 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python