Добавлена в версию: 1.0
Описание:
Возвращает текущее значение высоты в пикселях для первого совпавшего элемента в наборе.
Разница между
.css('height') и .height()
в том, что в последнем возвращается значение без единицы измерения в пикселях
(например, 400), в то время как в первом варианте возвращается значение с единицей измерения
(например, 400px). Метод .height()
предпочтительней когда высота элемента требуется для математических вычислений.
Начиная с jQuery версии 1.2 этот метод также позволяет находить высоту для объектов window и document.
$(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document
Примеры
Пример
Показывает несколько значений высоты. Обратите внимание, что значения могут быть немного меньшими, чем Вы ожидали, поскольку значения берутся из фреймов. Желтый цвет показывает тело фрейма.
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());
});
Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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="http://code.jquery.com/jquery-latest.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>
<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>
Описание: Устанавливает свойство высоты стиля CSS для каждого элемента в наборе.
Когда вызывается .height(value),
значение может быть любое (число и единица измерения) или число.
Если только число передано в качестве значения, jQuery предполагает единицу измерения пиксель.
Если передана строка, тем не менее, только CSS правильного формата может использоваться для высоты (например, 100px,
50%, или auto).
Имейте в виду, что в современных браузерах свойство CSS не включает padding, border, или margin.
Если не было указано явного объекта (например, ‘em’ или ‘%’), тогда к указанному значению добавляется приставка «px».
Аргументы
значение
Целое число представляет число в пикселях, или целое число с единицей измерения (как строка).
Пример
При нажатии ЛКМ, изменяет высоту элемента div до 30px, а также изменяется цвет фона.Полный код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>div { width:50px; height:70px; float:left; margin:5px;
background:rgb(255,140,0); cursor:pointer; } </style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div").one('click', function () {
$(this).height(30)
.css({cursor:"auto", backgroundColor:"green"});
});
});
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Была ли эта информация полезной?
