jQuery之CSS

Posted 2021-04-08 小伍前端

一、CSS

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

访问 或设置 匹配元素的样式属性
name:要访问的属性名称 或 一个或多个css属性组成的一个数组

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

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

例：$("p").css({"color":"#ccc","fontSize":"red"});

name,value:属性名，属性值

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

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

二、位置

1、offset([coordinates])

获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top和left

html:
     <span>hello</span><span>world</span>
js:
     var offset =$("p:last").offset();
     p.html("left: " + offset.left + ", top " + offset.top);//获取第二段偏移
     $("span:last").offset({top:100,left:100});//设置第二段偏移

2、position()

获取匹配元素相对父元素的偏移,仅对可见元素有效

html:
    <span>Hello</span><span>world</span>
js:
    var position = $("p:first").positon();
    $("p:last").html("left: " + pisition.left + ", top: " + position.top);

3、scrollTop([val])

获取匹配元素相对滚动条顶部的偏移，对可见和隐藏元素都有效

4、scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移，对可见和隐藏元素都有效

三、尺寸

1、height([val|fn])

获取匹配元素当前计算的高度值(px)
val:设定CSS中‘height’的值
function(index,height):返回用于设置高度的一个函数。

2、width([val|fn])

获取第一个匹配元素当前计算的宽度值(px)
val:设定CSS中‘width’的值
function(index,width):返回用于设置高度的一个函数。

3、innerHeight()

获取第一个匹配元素内部区域高度(包括padding、不包括边框)，对可见和隐藏元素都有效

4、innerWidth()

获取第一个匹配元素内部区域宽度(包括padding、不包括边框)，对可见和隐藏元素都有效

5、outerHeight([options])

获取第一个匹配元素外部高度（默认包括padding和边框），对可见和隐藏元素均有效
若options设置为true，则会把margin也算上

6、outerWidth([options])

获取第一个匹配元素外部高度（默认包括padding和边框），对可见和隐藏元素均有效
若options设置为true，则会把margin也算上