jQuery 获得/控制元素的大小

最新推荐文章于 2021-07-07 16:48:57 发布

twilight0402

最新推荐文章于 2021-07-07 16:48:57 发布

阅读量940

点赞数

分类专栏： jQuery 文章标签： jquery css

本文链接：https://blog.csdn.net/twilight_karl/article/details/71334258

版权

jQuery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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

twilight0402

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 获得/控制元素的大小

width([纯数字/带单位的字符串]) 返回宽度/设置宽度 (返回值是数字)width(function(index,width){}) 采用匿名函数效果和css(“width”)类似，css() 返回字符串(px) alert("width:"+$("#div").width()); // 获得元素的宽度 $("#div").width('400px');
复制链接

扫一扫