您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關.height()的注意事項是什么,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
.height()
描述: 獲取匹配元素集合中的第一個元素的當前計算高度值。
添加的版本: 1.0.height()
這個方法不接受任何參數。
.css('height') 和 .height()之間的區別是后者返回一個沒有單位的數值(例如,400),前者是返回帶有完整單位的字符串(例如,400px)。當一個元素的高度需要數學計算的時候推薦使用.height() 方法 。
這個方法同樣能計算出window和document的高度。
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
注意.height()總是返回內容寬度,不管CSS box-sizing屬性值。
注意:在絕對定位和給定display:block時,雖然style和script標簽用.width() 或 height()也將報告一個值,強烈建議不要在這些標簽中調用這些方法。這是一種不好的做法,結果也證明是不可靠的。
例子:
顯示各個高度。注意這個來自值iframe的值可能小于你的預期。黃色高亮顯示iframe body。
<!DOCTYPE html>
<html>
<head>
<style>
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font-weight:bold; }
</style>
<script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
<div> </div>
<p>
Sample paragraph to test height
</p>
<script>
function showHeight(ele, h) {
$("div").text("The height for the " + ele +
" is " + h + "px.");
}
$("#getp").click(function () {
showHeight("paragraph", $("p").height());
});
$("#getd").click(function () {
showHeight("document", $(document).height());
});
$("#getw").click(function () {
showHeight("window", $(window).height());
});
</script>
</body>
</html>
關于“.height()的注意事項是什么”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。