CSS 位置 尺寸

CSS

css(name|pro|[,val|fn])

概述

访问匹配元素的样式属性。

参数

name

要访问的属性名称

properties

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

name,value

属性名,属性值

name,function(index, value)

1:属性名

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

示例

参数name 描述:

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

jQuery 代码:

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

参数properties 描述:

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

jQuery 代码:

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

参数name,value 描述:

将所有段落字体设为红色

jQuery 代码:

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

参数name,回调函数 描述:

逐渐增加div的大小

jQuery 代码:

 $("div").click(function() {

    $(this).css({

      width: function(index, value) {

        return parseFloat(value) * 1.2;

      }, 

      height: function(index, value) {

        return parseFloat(value) * 1.2;

      }

    });

  });

JavaScript parseFloat() 函数

JavaScript 全局对象

定义和用法

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

 

位置

offset([coordinates])

概述

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

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

参数

coordinatesObject{top,left}, function(index, coords)

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

示例

无参数描述:

获取第二段的偏移

HTML 代码:

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

jQuery 代码:

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

var offset = p.offset();

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

结果:

<p>Hello</p><p>left: 0, top: 35</p>

参数coordinates 描述:

获取第二段的偏移

HTML 代码:

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

jQuery 代码:

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

 

position()

概述

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

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

示例

描述:

获取第一段的偏移

HTML 代码:

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

jQuery 代码:

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

var position = p.position();

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

结果:

<p>Hello</p><p>left: 15, top: 15</p>

 

scrollTop([val])

概述

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

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

参数

valString, Number

设定垂直滚动条值

示例

无参数描述:

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

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);

 

scrollLeft([val])

概述

获取匹配元素相对滚动条左侧的偏移。

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

参数

valString, Number

设定水平滚动条值

示例

无参数描述:

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

HTML 代码:

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

jQuery 代码:

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

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

结果:

<p>Hello</p><p>scrollLeft: 0</p>

参数val 描述:

设置相对滚动条左侧的偏移

jQuery 代码:

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

 

尺寸

height([val|fn])

概述

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

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

参数

val

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

function(index, height)

无参数描述:

获取第一段的高

jQuery 代码:

$("p").height();

参数val 描述:

把所有段落的高设为 20:

jQuery 代码:

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

参数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, Function

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

function(index, height)String, Number, Function

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

示例

无参数描述:

获取第一段的宽

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()

概述

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

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

示例

描述:

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

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>

 

innerWidth()

概述

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

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

示例

描述:

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

HTML 代码:

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

jQuery 代码:

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

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

结果:

<p>Hello</p><p>innerWidth: 40</p>

 

outerHeight([options])

概述

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

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

参数

optionsBoolean默认值:'false'

设置为 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>

 

outerWidth([options])

概述

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

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

参数

optionsBoolean默认值:'false'

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

示例

描述:

获取第一段落外部宽度。

HTML 代码:

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

jQuery 代码:

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

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

结果:

<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>