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页面加载初始化常用的三种方法
Jun 04 Javascript
javascript 闭包详解
Feb 15 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
图解javascript作用域链
May 27 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
vue 动态创建组件的两种方法
Dec 31 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 过滤器实现代码
2010/08/09 PHP
PHP 查找字符串常用函数介绍
2012/06/07 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python简单实现子网掩码转换的方法
2016/04/13 Python
Python中单、双下划线的区别总结
2017/12/01 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Python基本socket通信控制操作示例
2019/01/30 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python如何解除一个装饰器
2020/08/07 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
高三生物教学反思
2014/01/25 职场文书
党建工作先进材料
2014/05/02 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
离退休人员聘用协议书
2014/11/24 职场文书
SQLServer常见数学函数梳理总结
2022/08/05 MySQL