一、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样式的更多相关文章

  1. jQuery控制CSS样式

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. jQuery操作css样式

    jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...

  3. jQuery获取CSS样式中的颜色值的问题

    转自:http://blog.csdn.net/cwj649956781/article/details/23261529 jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法,需 ...

  4. jquery-8 jquery如何处理css样式

    jquery-8  jquery如何处理css样式 一.总结 一句话总结: 1.如何获取网页的三个高? 1)可视区域的高$(window).height(); 2)文档总高度$(document).h ...

  5. jquery操作css样式的方法

    jquery操作css样式的方法(设置和获取)

  6. jquery修改css样式,样式带!important

    由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...

  7. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  8. jquery控制css的display(控制元素的显示与隐藏)

    使用jquery控制div的显示与隐藏: $("#div的id").show()表示display:block, $("#div的id").hide()表示di ...

  9. JQuery - 改变css样式

    jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代 ...

随机推荐

  1. 【2017 4 24 - B】 组合数

    [题目描述] 输入格式: 一行一个正整数n 输出格式: 一行一个数f(n)对1000000007取余的值 [分析] 就是乱搞?? 就是问根到叶子有多少条路径嘛. 然后路径可以π.1.1.π...这样表 ...

  2. Vakuum开发笔记01 开天辟地

    1.缘起 先驱--COGS 早在2008年,我自学PHP后开发了COGS,并成功用于学校内部的OJ,ruvtex.也曾经对外开放过,但是由于学校网络不稳定,后来一直连不上了.我还把COGS推荐给了OO ...

  3. 大学启示录I 浅谈大学生的学习与就业

    教育触感 最近看了一些书,有了一些思考,以下纯属博主脑子被抽YY的一些无关大雅的思考,如有雷同,纯属巧合.. 现实总是令人遗憾的,我们当中太多人已经习惯于沿着那一成不变的"典型成功道路&qu ...

  4. URAL 1970 J - 皇后像廣場 dfs

    J - 皇后像廣場 题目连接: http://acm.hust.edu.cn/vjudge/contest/123332#problem/J Description Vova was walking ...

  5. CentOS添加环境变量的三种方式

    CentOS添加环境变量的三种方式,以添加php环境变量为例,假定php的安装目录为 /usr/local/php5 一.仅对当前会话临时生效 [root@bogon ~]# export PATH= ...

  6. ubuntu中chown设置文件权限

    参考文献: http://yanwen.org/doc/chown.html http://www.cppblog.com/deercoder/articles/110129.html 可以通过ls ...

  7. [Go] 单元测试/性能测试 (go test)

    特征 Golang 单元测试对文件名和方法名,参数都有很严格的要求.例如: 1.文件名必须以 _test.go 结尾 2.方法名必须是 Test 开头 3.方法参数必须是 t *testing.T 或 ...

  8. android开发之GestureDetector手势识别(调节音量、亮度、快进和后退)

    写UI布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...

  9. Revit API通过相交过滤器找到与风管相交的对象。

    相交过滤器的应用,比几何相交法简便.Excluding剔除 //找到与风管相交的对象,通过相交过滤器. [TransactionAttribute(Autodesk.Revit.Attributes. ...

  10. WebLogic清理缓存

    如果发布到weblogic的工程,登录发现还是原来的代码错误,可尝试清理weblogic缓存: 1.在weblogic控制台中停止应用,删除部署的工程 2.登录weblogic服务器,删除以下目录中的 ...