height()函数三种重要操作
$(selector).height(length)
$(selector).height()
$(selector).height(function(index,oldheight){return oldheight})
1.height(length)函数:设置匹配元素的高度。
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>height函数的使用</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").css("background-color","red");
//设置id为p1标签的高度为100px,如果是$("#p1").height(100);默认是100px,如果指定单位要加上引号
$("#p1").height("100px");
});
</script>
</head>
<body>
<p id="p1" >height函数的使用</p>
</body>
</html>
2.height(l)函数:返回匹配元素的高度。
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>height函数的使用</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//获得标签的高度
alert("id为p1的标签--> height:"+$("#p1").height());
});
</script>
</head>
<body>
<p id="p1" style="background-color:red;height:100px">height函数的使用</p>
</body>
</html>
3.height(function(index,oldheight){return oldheight})函数:使用函数来设置所有匹配元素的高度。
index - 可选。接受选择器的 index 位置
oldvalue - 可选。接受选择器的当前值。
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>height函数的使用</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("background-color","red");
//使用函数来设置高度
$("#p1").height(function(n,c){
return c+10;
});
});
});
</script>
</head>
<body>
<p id="p1" >height函数的使用</p>
<button>以 10 像素的幅度增加 p 元素的高度</button>
</body>
</html>
$(selector).height(length)
$(selector).height()
$(selector).height(function(index,oldheight){return oldheight})
1.height(length)函数:设置匹配元素的高度。
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>height函数的使用</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").css("background-color","red");
//设置id为p1标签的高度为100px,如果是$("#p1").height(100);默认是100px,如果指定单位要加上引号
$("#p1").height("100px");
});
</script>
</head>
<body>
<p id="p1" >height函数的使用</p>
</body>
</html>
2.height(l)函数:返回匹配元素的高度。
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>height函数的使用</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//获得标签的高度
alert("id为p1的标签--> height:"+$("#p1").height());
});
</script>
</head>
<body>
<p id="p1" style="background-color:red;height:100px">height函数的使用</p>
</body>
</html>
3.height(function(index,oldheight){return oldheight})函数:使用函数来设置所有匹配元素的高度。
index - 可选。接受选择器的 index 位置
oldvalue - 可选。接受选择器的当前值。
例子:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>height函数的使用</title>
<!--引入jquery库-->
<script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#p1").css("background-color","red");
//使用函数来设置高度
$("#p1").height(function(n,c){
return c+10;
});
});
});
</script>
</head>
<body>
<p id="p1" >height函数的使用</p>
<button>以 10 像素的幅度增加 p 元素的高度</button>
</body>
</html>