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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
JavaScript基础语法让人疑惑的地方小结
May 23 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 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
php 获取本机外网/公网IP的代码
2010/05/09 PHP
php递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
PHP 验证登陆类分享
2015/03/13 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
浅谈js中的this问题
2017/08/31 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
javascript实现简单留言板案例
2021/02/09 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
python验证码识别的示例代码
2017/09/21 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
大学校务公开实施方案
2014/03/31 职场文书
倡议书范文
2014/04/16 职场文书
踏青活动策划方案
2014/08/19 职场文书
英文慰问信
2015/02/14 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang