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代码
Dec 24 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
JS实现点星星消除小游戏
Mar 24 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php输出图像的方法实例分析
2017/02/16 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
js取滚动条的尺寸的函数代码
2011/11/30 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
高效的获取当前元素是父元素的第几个子元素
2013/10/15 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
javascript 回到顶部效果的实现代码
2014/02/17 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
vue实例的选项总结
2020/06/09 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
Python程序运行原理图文解析
2018/02/10 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
为什么相对PHP黑python的更少
2020/06/21 Python
python实现图片素描效果
2020/09/26 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
土木工程专业自荐信
2013/10/04 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
2014最新离职证明范本
2014/09/12 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
python tkinter模块的简单使用
2021/04/07 Python
java设计模式--七大原则详解
2021/07/21 Java/Android