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操作DOM元素
使用jQuery操作DOM元素
16 1
|
4月前
|
前端开发 JavaScript
如何利用jQuery来向一个元素中添加和移除CSS类?
如何利用jQuery来向一个元素中添加和移除CSS类?
31 0
|
1月前
|
前端开发 JavaScript Java
第四章使用jQuery操作DOM元素
第四章使用jQuery操作DOM元素
9 0
|
1月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
10 0
|
1月前
|
JavaScript 索引
jQuery选择器 获取元素的十一种方式
jQuery选择器 获取元素的十一种方式
|
3月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
19 0
|
3月前
|
JavaScript
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
jQuery事件2-第6次课-给未来的元素绑事件-事件对象-JS盒模型-附案例、任务
39 0
|
3月前
|
JavaScript
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
jQuery DOM2-第4次课-从某个元素出发,往上下左右找祖先、后代、兄弟然后对其进行增删改-附资料作业笔记
25 0
|
3月前
|
JavaScript
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
jQuery -第3次课-DOM操作元素属性-样式等-附资料、作业
27 0
|
4月前
|
JavaScript 前端开发
jQuery 第八章(jQuery操作dom元素)
jQuery 第八章(jQuery操作dom元素)
55 0