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

 <!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>
 
上一篇:单链表@线性表 -- 增删查改


下一篇:数据结构C语言之链表