Руководство jQuery

Опубликовано admin - вт, 05/01/2018 - 23:40

[Функция] 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.0 (http://api.jquery.com/css/)

Версия jQuery 1.4.2 Документ создан 2010-08-21

Руководство по jQuery!

Плагины jQuery UI

Эффекты