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中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
jQuery.holdReady()使用方法
May 20 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
js实现圆形菜单选择器
Dec 03 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代码
2012/09/14 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
利用php生成验证码
2017/02/23 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP实现UTF8二进制及明文字符串的转化功能示例
2017/11/20 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
JS面向对象编程之对象使用分析
2010/08/19 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
为JS扩展Array.prototype.indexOf引发的问题及解决办法
2015/01/21 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
python三大神器之fabric使用教程
2019/06/10 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
营业经理岗位职责
2013/11/10 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
幼儿教师考核制度
2014/01/25 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏