js进阶 11-6  jquery如何获取和设置元素的宽高（jquery多方法）

一、总结

一句话总结：jquery里面多是方法啊，比如jquery对象的宽高。所以取值是方法，赋值就是方法里面带参数。

1、百度富文本编辑器ueditor如何设置宽高？

jquery对象的width()和height()方法

37             $('#btn2').click(function(){

38                 $("#div1").width(50)

39                 $('#div1').height(50)

40             })

2、juqery对象的宽高对应的三个方法是什么，分别表示什么意思？

元素的宽度高度

  1. width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
  2. innerWidth() 方法返回元素的宽度（包括内边距）
  3. outerWidth() 方法返回元素的宽度（包括内边距和边框）
  4. height()、innerHeight()、outerHeight()与宽度类似

3、juqery对象如何设置一个表示全副武装的宽度（包括相关的一切）？

outerWidth()方法加true参数

34             //outerWidth()    width + padding + border+margin

35                 alert($("#div1").outerWidth(true))

4、juqery对象的innerWidth()方法包括的是哪个边距？

内边距  padding

5、jquery的匿名函数中的index参数表示什么意思？

因为jquery对象多是集合，所以index就是表示所选元素的下标

43                 $("#main div").width(function(index,oldWidth){

44                     //alert(index)

45                     return oldWidth*(index+1)/5

46                 })

二、jquery如何获取和设置元素的宽高

1、相关知识

元素的宽度高度

  1. width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
  2. innerWidth() 方法返回元素的宽度（包括内边距）
  3. outerWidth() 方法返回元素的宽度（包括内边距和边框）
  4. height()、innerHeight()、outerHeight()与宽度类似

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style>

         #main{

             background: #ccc;padding: 10px;float: left;

         }

         #div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;}

     </style>

 </style>

 </head>

 <body>

     <div id="main">

         <div id="div1"></div>

         <div id="div2"></div>

         <div id="div3"></div>

     </div>

     <input id="btn1" type="button" value="获取">

     <input id="btn2" type="button" value="设置">

     <input id="btn3" type="button" value="设置2">

     <script type="text/javascript">

         $(function(){

             $('#btn1').click(function(){

                 alert($("#div1").width())

                 //width + padding

                 alert($("#div1").innerWidth())

                 //outerWidth()    width + padding + border

                 alert($("#div1").outerWidth())

             //outerWidth()    width + padding + border+margin

                 alert($("#div1").outerWidth(true))

             })

             $('#btn2').click(function(){

                 $("#div1").width(50)

                 $('#div1').height(50)

             })

             $('#btn3').click(function(){

                 $("#main div").width(function(index,oldWidth){

                     //alert(index)

                     return oldWidth*(index+1)/5

                 })

             })

         })

     </script>

 </body>

 </html>
 

js进阶 11-6 jquery如何获取和设置元素的宽高（jquery多方法）的更多相关文章

  1. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...

  2. js进阶 11-7 jquery如何获取和改变元素的位置

    js进阶 11-7  jquery如何获取和改变元素的位置 一.总结 一句话总结:jquery中匿名函数中的index参数是什么意思.jquery对象多集合,故index为所选元素的下标. 1.jqu ...

  3. 使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据

    js进阶 12-7 如何知道你是从哪个元素移动到当前元素与事件调用时如何添加额外数据 一.总结 一句话总结:event的relatedTarget属性和data属性. 1.如何知道你是从哪个元素移动到 ...

  5. Jquery 方式获取 iframe Dom元素

    Jquery 方式获取 iframe Dom元素 測试页面代码: <html>  <head>   <title>jquery方式,訪问iframe页面dom元素& ...

  6. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

  7. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  8. JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj).wid ...

  9. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

随机推荐

  1. Loadrunner经典测试实例

    Loadrunner经典测试实例

  2. CISP/CISA 每日一题 15

    CISA 每日一题(答) 作业记帐: 监控和记录信息系统资源的使用,这些信息可被信息系统审计师用来执行: 1.将资源使用和相关用户挂钩以便实行计费: 2.通过改变系统软件的默认设置来最优化硬件性能 作 ...

  3. 通过Ajax进行POST提交JSON类型的数据到SpringMVC Controller的方法

    现在在做的项目用到了SpringMVC框架,需要从前端angular接收请求的JSON数据,为了测试方便,所以直接先用AJAX进行测试,不过刚开始用平时用的ajax方法,提交请求会出现415或者400 ...

  4. JS contcat() 连接数组 函数

    语法: arrayObject.concat(arrayX,arrayX,......,arrayX) 1.把元素添加到数组中 arr.concat(a,b,c);2.把数组连起来 arr.conca ...

  5. 【河南省多校脸萌第六场 B】点兵点将

    [链接]点击打开链接 [题意] 在这里写题意 [题解] 先每个单位都不建造bi; 打死一个ai之后,把bi加入到大根堆里面. 然后等到不够打死某个单位的时候; 从大根堆里面取出最大的那个bi;不断取, ...

  6. apache+nginx 实现动静分离

    apache+nginx 实现动静分离 http://blog.csdn.net/xysoul/article/details/50347971

  7. Testin云測与ARM 战略合作：推动全球移动应用加速进入中国市场

    Testin云測与ARM 战略合作:推动全球移动应用加速进入中国市场 2014/10/14 · Testin · 业界资讯 (中国北京–2014年10月14日 )全球最大的移动游戏.应用真机和用户云測 ...

  8. ASM学习笔记--ASM 4 user guide 第二章要点翻译总结

    参考:ASM 4 user guide 第一部分 core API 第二章  类 2.1.1概观 编译后的类包括: l  一个描述部分:包括修饰语(比如public或private).名字.父类.接口 ...

  9. solrcloud集群搭建

    solrcloud 集群搭建 初始条件: 1. 三台服务器 IP 地址分别为 192.168.1.133 192.168.1.134 192.168.1.135 2. 使用 solr-5.3.1,zo ...

  10. 芯片AMS1117 电源芯片