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中wrapAll()方法用法实例
Jan 16 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
Sep 28 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
vue路由插件之vue-route
Jun 13 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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/04/28 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
JS处理VBArray的函数使用说明
2008/05/11 Javascript
JavaScript 创建对象
2009/07/17 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
原生js实现下拉框功能(支持键盘事件)
2017/01/13 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
require.js中的define函数详解
2017/07/10 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
python模块之StringIO使用示例
2015/04/08 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Python机器学习之决策树算法
2017/12/22 Python
python基于http下载视频或音频
2018/06/20 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
Python numpy矩阵处理运算工具用法汇总
2020/07/13 Python
python 进程池pool使用详解
2020/10/15 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
德国自行车商店:Tretwerk
2019/06/21 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
校庆接待方案
2014/03/18 职场文书
创先争优宣传标语
2014/10/08 职场文书
工地食品安全责任书
2015/05/09 职场文书
公司环境卫生管理制度
2015/08/05 职场文书