jQuery-处理css样式

1、css方法
获取匹配元素集合中的第一个元素的样式属性的值 或 设置每个匹配元素的一个或多个CSS属性
1)获取并设置单个css值
jQuery对象.css('css属性');
jQuery对象.css('css属性','值');
2)获取多个css属性
jQuery对象.css(css属性数组);
3)一次设置多个css样式属性
jQuery对象.css(css属性与值的对象);
4)以相对值设置样式属性
jQuery对象.css('css属性','+=10');//数字值之前加上+=或者-=
这种方式仅适用于数值单位表示的css属性
5)给第二个参数传入函数来设置样式属性
函数接受两个参数
第一个参数表示当前元素的序号
第二个参数表示当前元素当前属性的值
函数内部this代表当前的html元素对象
返回设置的样式
$('#div1').css('background',function(i,currentValue){
return 设置的属性值;
});
2、针对具体属性的css便捷方法
除了css方法之外,jQuery还定义了许多方法,用来获取或设置常用css属性及其相关信息!
1)width方法
参数说明:
1>无参数
得到jQuery对象中第一个元素的宽度
2>数值或者字符串
设置jQuery对象中所有元素的宽度
3>传入函数
使用函数来设置jQuery对象中所有元素的宽度
两个参数:第一个表示当前元素序号,第二个参数表示当前元素的当前宽度
函数内部this代表当前的html元素对象
返回要设置的值
2)height方法
使用方法同上
作用,获取元素的高度
设置元素的高度
3)scrollTop方法
参数说明:
1>无参数
得到jQuery对象中第一个元素垂直滚动条的位置
2>数值
设置jQuery对象中所有元素的垂直滚动条的位置
4)scrollLeft方法
使用方法同上
作用,获取/设置 页面或者具体元素水平方向滚动条的位置
5)outerWidth方法
得到jQuery对象中第一个元素的宽度,包括内边距和边界
参数说明:
false:默认,表示不包括外边距
true:表示包括外边距
传入长度字符串或者数值来设置outerWidth
传入函数进行设置
函数接收元素的索引位置的设置和旧的outerWidth作为参数
this代表当前元素的对象
6)outerHeight方法
使用方法同上
得到jQuery对象中第一个元素的高度,包括内边距和边界
参数同上
7)innerWidth方法
得到jQuery对象中第一个元素的内部宽度,包括内边距,但不包括边界和外边距
参数说明:
传入长度字符串或者数值来设置innerWidth
传入函数进行设置
函数接收元素的索引位置的设置和旧的innerWidth作为参数
this代表当前元素的对象
8)innerHeight方法
使用方法同上
得到jQuery对象中第一个元素的内部高度,包括内边距,但不包括边界和外边

posted @   舒山  阅读(2344)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示