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 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
javascript删除html标签函数cIsHTML
Jan 09 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
JS实现的A*寻路算法详解
Dec 14 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
Sep 20 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
PHP数组实例详解
2016/06/26 PHP
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
vscode下的vue文件格式化问题
2018/11/28 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python中的高级数据结构详解
2015/03/27 Python
python检查指定文件是否存在的方法
2015/07/06 Python
windows下python和pip安装教程
2018/05/25 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python实现大文件分割与合并
2019/07/22 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
怎样写留学自荐信
2013/11/11 职场文书
业务经理的岗位职责
2013/11/16 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
初一体育教学反思
2014/01/29 职场文书
外贸专业求职信
2014/03/09 职场文书
财产公证书格式
2014/04/10 职场文书
业务员自荐信范文
2014/04/20 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
逃课检讨书范文
2015/05/06 职场文书
Python绘制地图神器folium的新人入门指南
2021/05/23 Python