jQuery獲得/控制元素的大小

twilight0402發表於2017-05-07
jQuery

版權宣告：本文為博主原創文章，轉載請註明出處。 https://blog.csdn.net/twilight_karl/article/details/71334258

  • width([純數字/帶單位的字串]) 返回寬度/設定寬度 (返回值是數字)
  • width(function(index,width){}) 採用匿名函式
  • height() 返回高度，用法與width()相同

效果和css(“width”)類似，css() 返回字串(px)

    alert("width:"+$("#div").width());     // 獲得元素的寬度
    $("#div").width(`400px`);              // 也可以設定寬度 400 / `400px`
    alert($("#div").css("width"));         // 返回帶單位的字串 400px

使用匿名函式控制寬度，index表示序號，width表示寬度

    $("div").width(function(index,width){
        if(index % 2 == 0 )
            return width+100;
        return width-100 ;  
    });


– innerWidth([value]) 寬度 包含內邊距
– innerHeight([value]) 高度 包含內邊距
– outerWidth([value]) 寬度 包含內邊距和邊框
– outerHeight([value]) 高度 包含內邊距和邊框
– outerWidth(true) 高度 包含內邊距、邊框、外邊距

對於以下元素：

<body>
    <div style="width:300px;height:300px;background-color:skyblue; padding:10px;border:solid 10px green; margin:10px;" id="div"></div>
</body>
    alert("innerWidth:"+$("#div").innerWidth());           // 包含內邊距 320 
    alert("outerWidth():"+$("#div").outerWidth());         // 包含內邊距和邊框 340 
    alert("outerWidth(true):"+$("#div").outerWidth(true)); // 包含內邊距邊框和外邊距 360


– offset() 獲取某個元素相對於可視區域的相對位置 返回一個物件兩個屬性left-top
– position() 相對於父元素的位置 返回物件

對於以下元素：

<body>
    <div style="position:absolute; left:100px ; top:100px;">
    <div style="width:300px;height:300px;background-color:skyblue; padding:10px;border:solid 10px green; margin:10px;" id="div"></div>
    </div>
</body>
    alert($("#div").offset().left);        //110 在螢幕中的位置加上外邊距的效果
    alert($("#div").offset().top);      //110

    alert($("#div").position().left);  // 0
    alert($("#div").position().top);   // 0


– scrollTop ([value]) 返回/設定滾動條的高
– scrollLeft(value) 返回/設定滾動條的寬 

alert($(document).scrollTop());


相關文章