jQuery中height()方法用法實(shí)例
本文實(shí)例講述了jQuery中height()方法用法。分享給大家供大家參考。具體分析如下:
此方法可以獲取或者設(shè)置匹配元素的高度值,默認(rèn)單位是px。
語(yǔ)法結(jié)構(gòu)一:
不帶參數(shù)的時(shí)候是返回第一個(gè)匹配元素的當(dāng)前高度。
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert($("div").height());
})
</script>
</head>
<body>
<div></div>
</body>
</html>
語(yǔ)法結(jié)構(gòu)二:
帶參數(shù)的時(shí)候是設(shè)置所有匹配元素的高度,默認(rèn)單位是px,當(dāng)然也可以使用其他的單位如em或者百分比等等。
實(shí)例代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dbjr.com.cn/" />
<title>腳本之家</title>
<style type="text/css">
div{
height:150px;
width:150px;
background-color:green;
margin-top:10px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("div").height("200px")
})
})
</script>
</head>
<body>
<div></div>
<button>點(diǎn)擊查看效果</button>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
- jQuery 位置函數(shù)offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
- 關(guān)于用Jquery的height()、width()計(jì)算動(dòng)態(tài)插入的IMG標(biāo)簽的寬高的問(wèn)題
- 使用jquery中height()方法獲取各種高度大全
- jQuery中的height innerHeight outerHeight區(qū)別示例介紹
- jQuery獲得包含margin的outerWidth和outerHeight的方法
- jquery獲取文檔高度和窗口高度匯總
相關(guān)文章
jQuery實(shí)現(xiàn)的無(wú)限級(jí)下拉菜單功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的無(wú)限級(jí)下拉菜單,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2016-09-09非常漂亮的相冊(cè)集 使用jquery制作相冊(cè)集
這篇文章主要為大家詳細(xì)介紹了使用jquery制作非常漂亮的相冊(cè)集,步驟詳細(xì),細(xì)節(jié)介紹完整,感興趣的小伙伴們可以參考一下2016-04-04jquery和css3實(shí)現(xiàn)的炫酷時(shí)尚的菜單導(dǎo)航
點(diǎn)擊列表圖表后,內(nèi)容頁(yè)面向內(nèi)移動(dòng)顯示菜單項(xiàng)。當(dāng)單擊關(guān)閉菜單按鈕時(shí),菜單項(xiàng)隱藏,內(nèi)容頁(yè)恢復(fù)原位2014-09-09兩個(gè)多選select(multiple左右)添加、刪除選項(xiàng)和取值實(shí)例
這篇文章主要介紹了兩個(gè)多選select(multiple左右)添加、刪除選項(xiàng)和取值實(shí)例,使用jquery實(shí)現(xiàn),需要的朋友可以參考下2014-05-05基于jQuery實(shí)現(xiàn)表單提交驗(yàn)證
本文給大家分享的是一段基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的表單提交驗(yàn)證的代碼,非常簡(jiǎn)單實(shí)用,推薦給有相同需求的小伙伴們參考下。2014-11-11用jQuery實(shí)現(xiàn)檢測(cè)瀏覽器及版本的腳本代碼
2008-01-01jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開(kāi)菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jquery使用$(element).is()來(lái)判斷獲取的tagName
這篇文章主要介紹了jquery使用$(element).is()來(lái)判斷獲取的tagName以及將取到標(biāo)簽用作到別的地方,需要的朋友可以參考下2014-08-08jquery實(shí)現(xiàn)用戶登陸界面(示例講解)
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)用戶登陸界面(示例講解)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09