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 validate.js表单验证的基本用法入门
May 13 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
JS动画定时器知识总结
2018/03/23 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python按比例随机切分数据的实现
2019/07/11 Python
python和php学习哪个更有发展
2020/06/17 Python
Python如何输出警告信息
2020/07/30 Python
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
研讨会主持词
2014/04/02 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
清明节寄语2015
2015/03/23 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
亮剑精神观后感
2015/06/05 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
分家协议书范本
2016/03/22 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android