[Функция] height()
Раздел "CSS"
Функция предоставляет доступ к текущему значению высоты, выраженному в пикселях, первого подходящего элемента.
Параметры
Описание
В jQuery 1.2, этот метод позволяет вычислить высоту окна и документа.
Примеры
Пример:
Показать различные значения возвращаемые свойством height. Учтите значение переменной iframe может быть настолько маленьким насколько вам необходимо. Iframe body выделен желтым цветом.
"jQuery"
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());
});
"HTML"
<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>
"CSS"
body { background:yellow; }
button { font-size:12px; margin:2px; }
p { width:150px; border:1px red solid; }
div { color:red; font}
"Живой пример jQuery"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link href="http://test-drupal.ru/themes/slyweb/css/jqueryiframe.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> $(document).ready(function(){ 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> </head> <body class="iframe"> <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> </body> </html> <style> body { background:yellow; } button { font-size:12px; margin:2px; } p { width:150px; border:1px red solid; } div { color:red; font} </style>
Версия jQuery 1.4.2
Документ создан 2010-08-21