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. BZOJ1014[JSOI2008]火星人prefix(splay维护hash)

    Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...

  2. URL短地址压缩算法 微博短地址原理解析 （Java实现）

    原博客地址:http://blog.csdn.net/xyz_lmn/article/details/8057270 最近,项目中需要用到短网址(ShortUrl)的算法,于是在网上搜索一番,发现有C ...

  3. PatentTips - Interrupt redirection for virtual partitioning

    BACKGROUND The present disclosure relates to the handling of interrupts in a environment that utiliz ...

  4. Spring.net的Demo项目，了解什么是控制反转

    Spring这个思想,已经推出很多年了. 刚开始的时候,首先是在Java里面提出,后来也推出了.net的版本. Spring里面最主要的就是控制反转(IOC)和依赖注入(DI)这两个概念. 网上很多教 ...

  5. Android Studio中怎样引用图片资源

    随着不断接触Android Studio,越来越发现和Eclipse有着巨大的差别. 不管是表面的目录结构,还是内在对各种资源的管理. 本篇就来聊聊Android Studio中怎样来显示图片. 以及 ...

  6. 文档翻译第003篇：Process Monitor帮助文档（Part 3，附Process Monitor的简单演示）

    [导入与导出配置] 一旦您配置了一个筛选器,您能够使用"工具(Tools)"菜单中的"保存筛选器(SaveFilters)"菜单项将其保存.Process Mo ...

  7. CentOS搭建xfce桌面+VNC教程

    CentOS搭建xfce桌面+VNC教程 Linux的安全与性能向来为开发者所称道,你可以轻松地在搜索引擎中找到各种Linux优越性的说辞,其中不乏Linux的激进者.特别是当你步入VPS领域,更多地 ...

  8. Binary Search Algorithm

    二分查找代码: //============================================================================ // Name : Bin ...

  9. Jszip的使用和打包下载图片

    因为canvas总结到后面又想到了jszip的一些事情,那就索性也回去看看吧.试过,至少谷歌和火狐都是支持jszip的. 1.  jszip的使用 官方文档说的很清楚了,而且也有读取zip文件.生成z ...

  10. winform最大化后不遮挡任务栏

    在窗体初始化后添加一句代码 this.MaximizedBounds = Screen.PrimaryScreen.WorkingArea;