jquery css 操作

先看下CSS内部距离的margin与padding如何进行区分一张图片，

一、css(name|pro|[,val|fn])属性

主要是为了设置CSS样式的

参数

nameStringV1.0

要访问的属性名称

propertiesMapV1.0

要设置为样式属性的名/值对

name,valueString, NumberV1.4

属性名,属性值

name,function(index, value)String,FunctionV1.0

1:属性名

2:此函数返回要设置的属性值。接受两个参数，index为元素在对象集合中的索引位置，value是原先的属性值。

HTML元素为：<p>我的P</p>

参数name 描述:

取得第一个段落的color样式属性的值。

jQuery 代码:

$("p").css("color");

参数properties 描述:可以设置多个CSS样式连写。

 

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

参数name,value 描述:直接可以设置一个CSS样式，如

$("p").css("color","red");

参数name,回调函数 描述:

逐渐增加div的大小

 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

二、offset([coordinates])

概述

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

参数

coordinatesObject{top,left}, function(index, coords)V1.2

一个对象，必须包含top和left属性，作为元素的新坐标。这个参数也可以是一个返回一对坐标的函数，函数的第一个参数是元素的索引，第二个参数是当前的坐标。

参数

coordinatesObject{top,left}, function(index, coords)V1.2

一个对象，必须包含top和left属性，作为元素的新坐标。这个参数也可以是一个返回一对坐标的函数，函数的第一个参数是元素的索引，第二个参数是当前的坐标。

        打印p的坐标：alert($("p").offset().top);

        当然我们也可以重新设置元素的坐标值

 $("p").offset({ top: 10, left: 30 });

四、position()元素

V1.2概述

获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

         $("p:last").position().left;

    position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。

offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。

下边看个简单的例子，这里外层的div元素(position:relative)仅一个：

<div id="outer" style="width:200px;position:relative;left:100px;"> 
<div id="inner" style="position:absolute;left:50px;top:60px;"> </div>
 </div>

//获取相对于最近的父级(position:relative)的位置 
var vposition = $("#inner").position(); 
alert(vposition.left); //输出：50 
alert(vposition.top); //输出：60
 var voffset = $("#inner").offset(); 
alert(voffset.left); //输出：$("#outer").offset().left+50
 alert(voffset.top); //输出：$("#outer").offset().top+60

在不同浏览器中,offset()得到的相对于浏览器的位置不同.

注：

何为绝对位置，何为相对位置呢？不管相对还是绝对，都有一个参照点，对于绝对位置比较简单，它的参照点永远是页面的左上角（注意：body默认是margin值的，如果没有手工修改此值，参照点不是正左上角，会有几个像素的偏移）；相对位置的参照点就比较麻烦，很多地方都说相对父元素左上角，那究竟哪个算父元素呢？这个父元素并不一定是该元素的直接父元素，有可能是父元素的父元素，甚至可能的参考点是页面的左上角，父元素的定义是它的所有上层元素中第一个（距离本元素最近）css style中设置了position属性的元素，如果所有上级元素都没有设置该属性，那么参照点就是页面的左上角，跟offset一致了。

例如代码：

<div style="padding: 10px;border:1px solid; position: relative;width:180px;">
	<div style="padding: 10px;position: relative;border:1px solid;">
		<div id="test" style="background-color: #000;width: 20px;height: 20px;"></div>
	</div>
</div>

这时id为test的div的相对位置的参照点就是他直接父元素，所以得到的left,top都为10，而下面的代码

<div style="padding: 10px;border:1px solid; position: relative;width:180px;">
	<div style="padding: 10px;border:1px solid;"><!-- 注意没有设置position -->
		<div id="test" style="background-color: #000;width: 20px;height: 20px;"></div>
	</div>
</div>

此时参照点就是最外层的div，因此left、top的值为21px，即10 + 1 + 10,10是padding，1是border的

五、scrollTop([val])

概述

获取匹配元素相对滚动条顶部的偏移。

此方法对可见和隐藏元素均有效。

参数

valString, NumberV1.2.6

设定垂直滚动条值

示例

无参数描述:

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

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

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

结果:

<p>Hello</p><p>scrollTop: 0</p>

参数val 描述:

设置相对滚动条顶部的偏移

jQuery 代码:

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

六、height([val|fn])

概述

取得匹配元素当前计算的高度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的高

参数

valString, Number, FunctionV1.0

设定CSS中 'height' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的高度。

function(index, height)String, Number, FunctionV1.4.1

返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

<a  οnclick="onc1()">点我</a>
      <a  οnclick="onc2()">点我1</a>

测试代码如下：

function onc1(){
     $("div").height(300);//设置高度
    }
    function onc2(){
    alert($("div").height());//获取高度
    }

参数function(index, height) 描述:

以 10 像素的幅度增加 p 元素的高度

jQuery 代码:

  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

七、width([val|fn])

概述

取得第一个匹配元素当前计算的宽度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

参数

valString, Number, FunctionV1.0

设定CSS中 'width' 的值，可以是字符串或者数字，还可以是一个函数，返回要设置的数值。函数接受两个参数，第一个参数是元素在原先集合中的索引位置，第二个参数为原先的宽度。

function(index, height)String, Number, FunctionV1.4.1

返回用于设置宽度的一个函数。接收元素的索引位置和元素旧的宽度值作为参数。

示例

无参数描述:

获取第一段的宽

jQuery 代码:

$("p").width();

参数val 描述:

把所有段落的宽设为 20:

jQuery 代码:

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

参数function(index, height) 描述:

以 10 像素的幅度增加 p 元素的宽度

jQuery 代码:

  $("button").click(function(){
    $("p").width(function(n,c){
    return c+10;
    });
  });

八、innerHeight() innerWidth()

V1.2.6概述

获取第一个匹配元素内部区域高度或宽度（包括补白、不包括边框）。

此方法对可见和隐藏元素均有效。

示例

描述:

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

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

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

结果:

<p>Hello</p><p>innerHeight: 16</p>

九、outerHeight([options]) outerWidth([options])

概述

获取第一个匹配元素外部高度或看宽度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。

参数

optionsBoolean默认值:'false'V1.2.6

设置为 true 时，计算边距在内。

示例

描述:

获取第一段落外部高度。

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

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

结果:

<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>