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. Dialog和FormView如何派生通用类

    派生通用类涉及到派生类的构造函数需要传递窗口ID和CWnd,所以要在派生类中事先定义好 在Dialog中构造函数是这样定义的 public: CDialogEx(); CDialogEx(UINT n ...

  2. 让我们彻底看清MVC、MVP

    这里開始记录下来自己对MVC.MVP.MVVM这三种框架模式的理解,本文从以下几个方面来梳理. 架构的目的 框架模式.设计模式 MVC设计的介绍 MVC在Android中的应用 MVC该怎样设计 MV ...

  3. 第6章4节《MonkeyRunner源代码剖析》Monkey原理分析-事件源-事件源概览-翻译命令字串

    在第2节中我们看到了MonkeySourceNetwork是怎样从Socket中获取MonkeyRunner发送过来的命令字串的,可是最后怎样将它翻译成事件的代码我们还没有进行分析,由于在那之前我们还 ...

  4. gplaycli—— 用于从 GooglePlayStore 中下载和管理 Apk 文件的命令行工具

    gplaycli-- 用于从 GooglePlayStore 中下载和管理 Apk 文件的命令行工具 这个 GooglePlay市场 中 https://play.google.com/store/a ...

  5. 编码与乱码(05)---GBK与UTF-8之间的转换--转载

    原文地址:http://www.blogjava.net/pengpenglin/archive/2010/02/22/313669.html [GBK转UTF-8] 在很多论坛.网上经常有网友问“  ...

  6. 关于React中,map出来的元素添加事件问题

    用es6 map 的写法 直接绑定一个onTouchStart 事件不会报错. 用es5的map写法  如果不加上this  会报这个错误 无法读取未定义的属性 解决的方法是 绑定this  就可以了

  7. UIViewController所有API的学习。

    <欢迎大家加入iOS开发学习交流群:QQ529560119> /*      UIViewController is a generic controller base class tha ...

  8. 使用mingw制作dll文件

    使用mingw制作dll文件 安装mingw 准备math.c文件 //math.c #include<stdio.h> int add(int a,int b){ return a+b; ...

  9. vc6.0 点编译时提示Cannot complile the file &#39;D:\souce-code\vc-workspace\对话框\MainFrm.h&#39;; no compile tool is

    问题描写叙述: vc6.0程序,点击编译时提示对话框,内容为: Cannot complile the file 'D:\souce-code\vc-workspace\对话框\MainFrm.h'; ...

  10. Redis 哨兵（sentinel）模式集群配置（5.0.3版本）

    一.准备工作 1.系统环境:centos6.4 2.服务器六台(1主5从): 192.168.1.161(master) 192.168.1.162(slave) 192.168.1.163(slav ...