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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
JavaScript 学习笔记(四)
Dec 31 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
Sep 02 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
第四节--构造函数和析构函数
2006/11/16 PHP
推荐php模板技术[转]
2007/01/04 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
PHP children()函数讲解
2019/02/03 PHP
取得窗口大小 兼容所有浏览器的js代码
2011/08/09 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
在Python中使用__slots__方法的详细教程
2015/04/28 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
如何利用python读取micaps文件详解
2020/10/18 Python
web页面录屏实现
2019/02/12 HTML / CSS
会计自我鉴定范文
2013/10/06 职场文书
简历的自我评价范文
2014/02/04 职场文书
小学生常见病防治方案
2014/06/06 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
村级四风对照检查材料
2014/08/24 职场文书
归元寺导游词
2015/02/06 职场文书
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技