jQuery给元素添加样式的方法详解


Posted in Javascript onDecember 30, 2015

本文实例讲述了jQuery给元素添加样式的方法。分享给大家供大家参考,具体如下:

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属性

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
图片之间的切换
Jun 26 Javascript
js DataSet数据源处理代码
Mar 29 Javascript
JavaScript中的细节分析
Jun 30 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
vant中的toast轻提示实现代码
Nov 04 Javascript
Underscore源码分析
Dec 30 #Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
Dec 30 #Javascript
javascript实现禁止复制网页内容汇总
Dec 30 #Javascript
jquery实现树形菜单完整代码
Dec 29 #Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 #Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 #Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 #Javascript
You might like
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
理解JavaScript中的事件
2006/09/23 Javascript
不错的新闻标题颜色效果
2006/12/10 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
2017/09/18 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
javascript用rem来做响应式开发
2018/01/13 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
Python实现备份文件实例
2014/09/16 Python
python使用marshal模块序列化实例
2014/09/25 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python日期的加减等操作的示例
2017/08/15 Python
python flask实现分页的示例代码
2018/08/02 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
python_mask_array的用法
2020/02/18 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
怎样写留学自荐信
2013/11/11 职场文书
财务主管岗位职责
2014/02/28 职场文书
绿色环保演讲稿
2014/05/10 职场文书
2014组织生活会方案
2014/05/19 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis