jQuery 获得/控制元素的大小

来源：互联网发布：淘宝旅行网订机票编辑：程序博客网时间：2024/05/19 22:56

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

0 0

jQuery 获得/控制 元素的大小

jQuery 获得/控制元素的大小