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. C++访问WebService gSoap方式

    一.             gSOAP访问WebService 1.      下载gSOAP gSOAP 2.7.17 版下载地址http://sourceforge.net/projects/g ...

  2. Android开机自动运行APP——BroadcastReceiver

    前言: 有些时候,应用需要在开机时就自动运行,例如某个自动从网上更新内容的后台service.怎样实现开机自动运行的应用?在撰写本文时,联想到高焕堂先生以“Don't call me, I'll ca ...

  3. HTML基础-第一讲

    转自:https://blog.csdn.net/likaier/article/details/326639?utm_source=blogxgwz9 HTML是网页主要的组成部分,基本上一个网页都 ...

  4. 关于C++中的内存泄露

    1.c++内存泄漏的定义: 内存泄漏(memory leak)是指由于疏忽或错误造成了程序未能释放掉不再使用的内存的情况.内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,失 ...

  5. 1.3 Quick Start中 Step 1: Download the code官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 不要局限于,这个版本,我只是以最新的版本,来做个引子,让大家对官网的各个kafka版 ...

  6. 关于数据库中的JOIN的用法学习

    下面是例子分析 表A记录如下:  aID aNum  1 a20050111  2 a20050112  3 a20050113  4 a20050114  5 a20050115 表B记录如下:  ...

  7. Python图片的横坐标汉字

    给一个例子 : # -*- coding: utf-8 -*-import matplotlib.pyplot as plt  import py_hanzi as ch         #关键在于这 ...

  8. java set转list，数组与list的转换

    读zookeeper的源码(zookeeper.java)时发现的,平时没有怎么注意: private final ZKWatchManager watchManager; List<Strin ...

  9. UVA 11388 - GCD LCM 水~

    看题传送门 题目大意: 输入两个数G,L找出两个正整数a 和b,使得二者的最大公约数为G,最小公倍数为L,如果有多解,输出a<=b且a最小的解,无解则输出-1 思路: 方法一: 显然有G< ...

  10. DBeaver笔记-快捷键篇

    公司使用的是PostgreSQL数据库,可以使用pgAdmin或者DBeaver进行连接该数据库.个人更喜欢用DBeaver,因为其界面更加美观,操作也相对简单.对于习惯了eclipse的开发者来说, ...