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 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
jQuery :first选择器使用介绍
Aug 09 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
canvas实现图像截取功能
Feb 06 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
简述AngularJS的控制器的使用
2015/06/16 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
jQuery选择器之子元素过滤选择器
2017/09/28 jQuery
vue组件间通信子与父详解(二)
2017/11/07 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
vue登录注册实例详解
2019/09/14 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
Python判断操作系统类型代码分享
2014/11/22 Python
Python标准库inspect的具体使用方法
2017/12/06 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
药剂专业求职信
2014/06/20 职场文书
对学校的意见和建议
2015/06/04 职场文书