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. jsp+tomcat+ 创建project 配置project

    *如今我们已经下载到了 tomcat 7.0+ eclipse for java ee 直接解压,打开eclipse. 接下来是步骤: eclipse 打开的界面.空空如也 ! ..* 点击 file ...

  2. 15.lambda表达式

    #include <iostream> #include <array> using namespace std; //解决函数怀孕现象 //[](){} //[] =引用,只 ...

  3. ajax上传进度条

    <script type="text/javascript"> function register(){ var frm = document.getElementBy ...

  4. WCF REST (一)

    最近工作中学习使用了WCF REST,REST 有很多好处 高效 简约  面向资源  而客户端调用 也变得非常简单.REST 入门的资料等 大家可以去网上找 这里主要分享下遇到的问题以及解决~ 一.环 ...

  5. POJ 3187 Backward Digit Sums 枚举水~

    POJ 3187  Backward Digit Sums http://poj.org/problem?id=3187 题目大意: 给你一个原始的数字序列: 3   1   2   4  他可以相邻 ...

  6. 深入理解线程本地变量ThreadLocal

    ThreadLocal理解: 假设在多线程并发环境中.一个可变对象涉及到共享与竞争,那么该可变对象就一定会涉及到线程间同步操作,这是多线程并发问题. 否则该可变对象将作为线程私有对象,可通过Threa ...

  7. 【习题 3-4 UVA - 455】Periodic Strings

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 枚举 [代码] #include <bits/stdc++.h> using namespace std; const ...

  8. ivotal-tc-Server与Tomcat区别

    Pivotal-tc-Server之前叫做SpringSource tc Server,包含三个版本分别是:Spring版.标准版和开发版,但其中只有开发版是免费的.比如在STS中包含的版本就是开发板 ...

  9. 自己定义Dialog的具体步骤（实现自己定义样式一般原理）

    转载请标注转载http://blog.csdn.net/oqihaogongyuan/article/details/50958659 自己定义Dialog的具体步骤(实现自己定义样式一般原理)    ...

  10. SDWebImage使用

    SDWebImage这个类库提供一个UIImageView类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. 将SDWebImage类库添加入工程时,一定 ...