jQuery中的CSS(五)

zengni 2019-11-02

1. css(name|pro|[,val|fn]), 访问匹配元素的样式属性

jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动加上前缀(在适当的时候),比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".

参数说明:

  • name:要访问的属性名称
  • properties:要设置样式的键值对对象,{"":""}
  • name,value:属性名,属性值
  • name,function(index, value):
    • 属性名
    • 此函数返回要设置的属性值。接受两个参数,index为元素在对象集合中的索引位置,value是原先的属性值。
$("p").css("color");

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

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

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

2. offset([coordinates]), 获取匹配元素在当前视口的相对偏移

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

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

3. position(), 获取匹配元素相对父元素的偏移

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

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

4. scrollTop([val]), 获取匹配元素相对滚动条顶部的偏移

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

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

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

5. scrollLeft([val]), 获取匹配元素相对滚动条左侧的偏移

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

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

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

6. height([val|fn]), 取得匹配元素当前计算的高度值(px)

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

function(index, height):返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。

$("p").height();

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

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

7. width([val|fn]), 取得第一个匹配元素当前计算的宽度值(px)

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

function(index, height):返回用于设置宽度的一个函数。接收元素的索引位置和元素旧的宽度值作为参数。

$("p").width();

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

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

8. innerHeight(), 获取第一个匹配元素内部区域高度(包括补白、不包括边框)

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

9. innerWidth(), 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)

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

10. outerHeight([options]), 获取第一个匹配元素外部高度(默认包括补白和边框)

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

参数说明:

  • options:Boolean,设置为 true 时,计算边距在内。
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );

11. outerWidth([options]),获取第一个匹配元素外部宽度(默认包括补白和边框)

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

参数说明:

  • options:Boolean,设置为 true 时,计算边距在内。
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );

相关推荐

aSuncat / 0评论 2020-08-18