您的位置：首页 > Web前端 > JQuery

jQuery 获得/控制元素的大小

2017-05-07 16:17 183 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery css

相关文章推荐

新的分享

章节导航

jQuery 获得/控制 元素的大小

jQuery 获得/控制元素的大小