jQuery 获得/控制 元素的大小

简介: 版权声明:本文为博主原创文章,转载请注明出处。 https://blog.
版权声明:本文为博主原创文章,转载请注明出处。 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());
相关文章
|
1月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
43 10
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
20 2
|
2月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
26 6
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
36 2
|
3月前
|
前端开发 JavaScript
jQuery改变元素的方法
jQuery改变元素的方法
18 1
|
3月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
32 0
|
3月前
|
JavaScript
JQuery——动态添加元素导致点击事件失效
JQuery——动态添加元素导致点击事件失效
38 0
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript 前端开发
我如何使用jQuery动画我的元素
我如何使用jQuery动画我的元素
27 0
|
5月前
|
前端开发 JavaScript
jQuery改变元素
jQuery改变元素