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 09 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
基于Bootstrap实现tab标签切换效果
Apr 15 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
Nov 12 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 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
德生PL330测评
2021/03/02 无线电
php session 错误
2009/05/21 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php Session存储到Redis的方法
2013/11/04 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
Opacity.js
2007/01/22 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
2014/07/02 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
Javascript字符串常用方法详解
2016/07/21 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
js实现全选反选不选功能代码详解
2019/04/24 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Python中关键字is与==的区别简述
2014/07/31 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
工作中个人的自我评价
2013/12/31 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
党员证明模板
2015/06/19 职场文书
Python实现科学占卜 让视频自动打码
2022/04/09 Python