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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 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概述.
2006/10/09 PHP
PHP 文章中的远程图片采集到本地的代码
2009/07/30 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
[01:06:12]VP vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
详解python单元测试框架unittest
2018/07/02 Python
python中的decimal类型转换实例详解
2019/06/26 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
工作失职检讨书范文
2014/01/16 职场文书
硕士生工作推荐信
2014/03/07 职场文书
党风廉政承诺书
2014/03/27 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
国庆节标语大全
2014/10/08 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
初一军训感言
2015/08/01 职场文书
采购员工作总结范文
2015/08/12 职场文书
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang
类和原型的设计模式之复制与委托差异
2022/07/07 Javascript
MySQL数据管理操作示例讲解
2022/12/24 MySQL