微信扫一扫打赏支持

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

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、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         #main{
11             background: #ccc;padding: 10px;float: left;
12         }
13         #div1,#div2,#div3{background: red;padding: 10px;margin:10px;width: 200px;height: 200px;border:solid 3px green;}
14     </style>
15 </style>
16 </head>
17 <body>
18     <div id="main">
19         <div id="div1"></div>
20         <div id="div2"></div>
21         <div id="div3"></div>
22     </div>
23     <input id="btn1" type="button" value="获取">
24     <input id="btn2" type="button" value="设置">    
25     <input id="btn3" type="button" value="设置2">
26     <script type="text/javascript">
27         $(function(){
28             $('#btn1').click(function(){
29                 alert($("#div1").width())
30                 //width + padding
31                 alert($("#div1").innerWidth())
32                 //outerWidth()    width + padding + border
33                 alert($("#div1").outerWidth())
34             //outerWidth()    width + padding + border+margin
35                 alert($("#div1").outerWidth(true))
36             })
37             $('#btn2').click(function(){
38                 $("#div1").width(50)
39                 $('#div1').height(50)
40             })
41             
42             $('#btn3').click(function(){
43                 $("#main div").width(function(index,oldWidth){
44                     //alert(index)
45                     return oldWidth*(index+1)/5
46                 })
47             })
48         })
49     </script>
50 </body>
51 </html>

 

 

 

 

 

 

 

 

 

 
posted @ 2018-06-20 09:16  范仁义  阅读(435)  评论(0)  编辑  收藏  举报