一、CSS 样式
1、CSS(name | prp |[,val|fn])
语法:
说明:访问或设置匹配元素的样式属性
参数:name:要访问的属性名称
properties:要设置为样式属性的名/值对
name,value:属性名,属性值
name,function(index,value) :1属性名;2此函数返回要设置的属性值,接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值
Demo:
1 //取得第一个段落的color样式属性的值。
2 $("p").css("color");
3
4 //将所有段落的字体颜色设为红色并且背景为蓝色。
5 $("p").css({ "color": "#ff0011", "background": "blue" });
6
7 //将所有段落字体设为红色
8 $("p").css("color","red");
二、位置
1、offset([coordinates])
用法:
说明:获取/设置匹配元素在当前视口的相对偏移,返回的对象包含两个整形属性:top 和 left,以像素计。此方法只对可见元素有效
参数:coordinates{top,left} 值对,比如{top:100,left:0} 带有 top 和 left 属性的对象
Demo:
1 //获取最后一段的偏移
2 var p = $("p:last");
3 var offset = p.offset();
4 p.html( "left: " + offset.left + ", top: " + offset.top );
5
6 //设置最后一段的偏移
7 $("p:last").offset({ top: 10, left: 30 });
2、position()
语法:
说明:获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
Demo:
1 // 获取第一段的偏移
2 var p = $("p:first");
3 var position = p.position();
4 $("p:last").html( "left: " + position.left + ", top: " + position.top );
3、scrollTop([val])
用法:
说明:获取/设置匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效
Demo:
1 //获取第一段相对滚动条顶部的偏移
2 var p = $("p:first");
3 $("p:last").text( "scrollTop:" + p.scrollTop() );
4
5 //设置相对滚动条顶部的偏移
6 $("div.demo").scrollTop(300);
4、scrollLeft([val])
用法:
说明:获取/设置匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。
Demo:
1 //获取第一段相对滚动条左侧的偏移
2 var p = $("p:first");
3 $("p:last").text( "scrollLeft:" + p.scrollLeft() );
4
5 //设置相对滚动条左侧的偏移
6 $("div.demo").scrollLeft(300);
三、尺寸
1、height([val | fn])
用法:
说明:获取/设置匹配元素的高度值(px)
Demo:
1 //获取第一段的高
2 $("p").height();
3
4 //把所有段落的高设为 20:
5 $("p").height(20);
2、width([val | fn])
用法:
说明:获取/设置匹配的元素的狂赌之(px)
Demo :
1 //获取第一段的宽
2 $("p").width();
3
4 //把所有段落的宽设为 20:
5 $("p").width(20);
3、innerHeight()
用法:
说明:获取匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
Demo:
1 //获取第一段落内部区域高度。
2 var p = $("p:first");
3 $("p:last").text( "innerHeight:" + p.innerHeight() );
4、innerWidth()
用法:
说明:获取匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效
Demo:
1 //获取第一段落内部区域宽度。
2 var p = $("p:first");
3 $("p:last").text( "innerWidth:" + p.innerWidth() );
5、outerHeight([options])
用法:
说明:获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。
参数:options 为 true时,计算外边距(margin)在内
Demo:
1 //获取第一段落外部高度。
2 var p = $("p:first");
3 $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
6、outerWidth([options])
用法:
说明:获取第一个匹配元素外部宽度(默认包括补白和边框),此方法对可见和隐藏元素均有效。
参数:options 设置为 true,计算外边距(margin)在内
Demo:
1 //获取第一段落外部宽度。
2 var p = $("p:first");
3 $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器