jquery 操作css样式、位置、尺寸方法汇总


Posted in Javascript onNovember 28, 2014

一、CSS

1、css(name)

访问第一个匹配元素的样式属性。
返回值 String
参数
name (String) : 要访问的属性名称
示例:

$("p").css("color"); //取得第一个段落的color样式属性的值

2、css(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
返回值 jQuery
参数
properties (Map) : 要设置为样式属性的名/值对
示例:

//1 将所有段落的字体颜色设为红色并且背景为蓝色 

$("p").css({ color: "#ff0011", background: "blue" }); 

//2 如果属性名包含 "-"的话,必须使用引号 

$("p").css({ "margin-left": "10px", "background-color": "blue" });

3、css(name,value)

在所有匹配的元素中,设置一个样式属性的值。数字将自动转化为像素值
返回值 jQuery
参数

name (value) : 属性名
value (String, Number) : 属性值
示例:

$("p").css("color","red"); //将所有段落字体设为红色

二、位置

1、offset()

获取匹配元素在当前视窗口的相对偏移。返回的对象包含两个整形属性:top 和 left。
注意:此方法只对可见元素有效。
返回值 Object{top,left}
示例:

/* 

//获取第二段的偏移 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:last"); 

var offset = p.offset(); 

p.html("left: " + offset.left + ", top: " + offset.top);

2、position()

获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
返回值 Object{top,left}
示例:

/* 

//获取第一段的偏移 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

var position = p.position(); 

$("p:last").html("left: " + position.left + ", top: " + position.top);

3、scrollTop()

获取匹配元素相对滚动条顶部的偏移。
注意:此方法对可见和隐藏元素均有效。
返回值 Integer
示例:

/* 

//获取第一段相对滚动条顶部的偏移  

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("scrollTop:" + p.scrollTop());

4、scrollTop(val)

传递参数值时,设置滚动条顶部偏移为该值。此方法对可见和隐藏元素均有效。
返回值 jQuery
示例:

$("div.demo").scrollTop(300);

5、scrollLeft()

获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。
返回值 Integer
示例:

/* 

//获取第一段相对滚动条左侧的偏移    

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("scrollLeft:" + p.scrollLeft());

6、scrollLeft(val)

传递参数值时,设置滚动条左侧偏移为该值。此方法对可见和隐藏元素均有效。
返回值 jQuery
示例:

$("div.demo").scrollLeft(300);

三、尺寸

1、height()

取得第一个匹配元素当前计算的高度值(px)。在 jQuery 1.2 以后可以用来获取 window 和 document 的高
返回值 Integer
示例:

/* 

//获取第一段的高     

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

alert($("p").height()); 

//获取文档的高 

alert($(document).height());

2、height(val)

为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位(如:em或%),使用px。如果没有明确指定单位(如:em或%),使用px。
返回值 jQuery
参数
val (String, Number) : 设定CSS中 'height' 的值
示例:

/* 

//把所有段落的高设为 20  

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

$("p").height(20); 

alert($("p").height());

3、width()

取得第一个匹配元素当前计算的宽度值(px)。在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
返回值 Integer
示例:0

/* 

//获取第一段的宽 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

alert($("p").width());

4、width(val)

为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位(如:em或%),使用px。
返回值 jQuery
参数
val (String, Number) : 设定 CSS 'width' 的属性值
示例:

/* 

//将所有段落的宽设为 20 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

$("p").width(20); 

alert($("p").width());

5、innerHeight()

获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
返回值 Integer
示例:

/* 

//获取第一段落内部区域高度 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("innerHeight:" + p.innerHeight());

7、innerWidth()

获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
返回值 Integer
示例:

/* 

//获取第一段落内部区域宽度 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("innerWidth:" + p.innerWidth());

7、outerHeight(options)

获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。
返回值 Integer
参数
options(Boolean) : (false)  设置为 true 时,计算边距在内。
示例:

/* 

//获取第一段落外部高度 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true));

8、outerHeight(options)

获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。
返回值 Integer
参数
options(Boolean) : (false)   设置为 true 时,计算边距在内。
示例:

/* 

//获取第一段落外部宽度 

文档片段:<p>Hello</p><p>2nd Paragraph</p> 

*/ 

var p = $("p:first"); 

$("p:last").text("outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true));

以上便是jQuery操作CSS样式、位置、尺寸的全部内容了,纯属是个人总结,如有遗漏或者错误,还请大家告之,本文将持续更新。

Javascript 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
javascript基本类型详解
Nov 28 #Javascript
javascript中数组array及string的方法总结
Nov 28 #Javascript
20条学习javascript的编程规范的建议
Nov 28 #Javascript
20个实用的JavaScript技巧分享
Nov 28 #Javascript
js获取浏览器基本信息大全
Nov 27 #Javascript
jQuery实现多按钮单击变色
Nov 27 #Javascript
jQuery的ready方法详解
Nov 27 #Javascript
You might like
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
深入分析php中接口与抽象类的区别
2013/06/08 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
ExpressJS入门实例
2015/01/14 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
ionic2打包android时gradle无法下载的解决方法
2017/04/05 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
python实现的简单抽奖系统实例
2015/05/22 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
Lucene推荐的分页方式是什么?
2015/12/07 面试题
网站设计师的岗位职责
2013/11/21 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
个人授权委托书模板
2014/09/14 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
2014年仓库工作总结
2014/11/20 职场文书
2016年党员干部廉政承诺书
2016/03/24 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
python井字棋游戏实现人机对战
2022/04/28 Python