Как вы получаете визуализированную высоту элемента?
Скажем, у вас есть элемент <div> с некоторым содержимым внутри. Это содержимое внутри растягивает высоту <div>. Как вы получаете "визуализированную" высоту, если вы явно не задали высоту. Очевидно, я пробовал:
var h = document.getElementById('someDiv').style.height;
Есть ли уловка для этого? Я использую jQuery, если это помогает.
Это должно быть просто
$('#someDiv').height();
с jQuery. Это возвращает высоту первого элемента в завернутом наборе как число.
Пытаясь использовать
.style.height
работает только в том случае, если вы установили свойство в первую очередь. Не очень полезно!
Попробуйте выполнить одно из следующих действий:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight включает высоту и вертикальное дополнение.
offsetHeight включает высоту, вертикальное отступы и вертикальные границы.
scrollHeight включает в себя высоту содержащегося документа (будет больше, чем просто высота в случае прокрутки), вертикальное заполнение и вертикальные границы.
NON JQUERY, поскольку в верхней части этих ответов была связка ссылок с использованием elem.style.height...
ВНУТРЕННЯЯ ВЫСОТА:
https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight
document.getElementById(id_attribute_value).clientHeight;
ВЕРХНЯЯ ВЫСОТА:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
document.getElementById(id_attribute_value).offsetHeight;
Или одна из моих любимых ссылок: http://youmightnotneedjquery.com/
Вы можете использовать .outerHeight() для этой цели.
Это даст вам полную визуализированную высоту элемента. Кроме того, вам не нужно устанавливать css-height элемента. Для предосторожности вы можете сохранить высоту авто, чтобы ее можно было отображать в соответствии с высотой содержимого.
//if you need height of div excluding margin/padding/border
$('#someDiv').height();
//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();
// if you need height of div including padding and border
$('#someDiv').outerHeight();
//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);
Для четкого представления этой функции вы можете перейти на сайт jQuery или подробное сообщение здесь. p >
он очистит разницу между .height()/innerHeight()/outerHeight()
style = window.getComputedStyle(your_element);
а затем просто: style.height
Я использую это:
document.getElementById('someDiv').getBoundingClientRect().height
Это также работает, когда вы используете виртуальный DOM. Я использую его в Vue следующим образом:
this.$refs['some-ref'].getBoundingClientRect().height
Обязательно используйте
$('#someDiv').height() // to read it
или же
$('#someDiv').height(newHeight) // to set it
Я публикую это как дополнительный ответ, потому что есть пара важных вещей, которые я только что узнал.
Я только сейчас попал в ловушку использования offsetHeight. Это то, что произошло:
Вот только часть этого:
Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)
Да, это выглядит как ОБА прокрутки и смещения. Если это не удается, это выглядит еще дальше, принимая во внимание проблемы совместимости браузера и CSS. Другими словами, вещи, которые я не забочусь - или хочу.
Но я не обязан. Спасибо jQuery!
Мораль истории: если у jQuery есть метод для чего-то, то это, вероятно, по уважительной причине, вероятно, связано с совместимостью.
Если вы недавно не читали список методов jQuery, я предлагаю вам взглянуть.
Я сделал простой код, который даже не нужен JQuery и, вероятно, поможет некоторым людям. Он получает общую высоту "ID1" после загрузки и использует ее на "ID2"
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
Затем просто установите тело, чтобы загрузить его
<body onload='anyName()'>
Так это ответ?
"Если вам нужно что-то вычислить, но не показывать его, установите элемент visibility:hidden и position:absolute, добавьте его в дерево DOM, получите offsetHeight и удалите его. (То, что делает библиотека прототипов строки в последний раз, когда я проверил).
У меня такая же проблема для ряда элементов. Нет никакого jQuery или Prototype, которые будут использоваться на сайте, но я все в пользу заимствовать технику, если она работает. В качестве примера некоторых вещей, которые не сработали, после чего у меня появился следующий код:
// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
var DoOffset = true;
if (!elementPassed) { return 0; }
if (!elementPassed.style) { return 0; }
var thisHeight = 0;
var heightBase = parseInt(elementPassed.style.height);
var heightOffset = parseInt(elementPassed.offsetHeight);
var heightScroll = parseInt(elementPassed.scrollHeight);
var heightClient = parseInt(elementPassed.clientHeight);
var heightNode = 0;
var heightRects = 0;
//
if (DoBase) {
if (heightBase > thisHeight) { thisHeight = heightBase; }
}
if (DoOffset) {
if (heightOffset > thisHeight) { thisHeight = heightOffset; }
}
if (DoScroll) {
if (heightScroll > thisHeight) { thisHeight = heightScroll; }
}
//
if (thisHeight == 0) { thisHeight = heightClient; }
//
if (thisHeight == 0) {
// Dom Add:
// all else failed so use the protype approach...
var elBodyTempContainer = document.getElementById('BodyTempContainer');
elBodyTempContainer.appendChild(elementPassed);
heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
elBodyTempContainer.removeChild(elementPassed);
if (heightNode > thisHeight) { thisHeight = heightNode; }
//
// Bounding Rect:
// Or this approach...
var clientRects = elementPassed.getClientRects();
heightRects = clientRects.height;
if (heightRects > thisHeight) { thisHeight = heightRects; }
}
//
// Default height not appropriate here
// if (thisHeight == 0) { thisHeight = elementHeightDefault; }
if (thisHeight > 3000) {
// ERROR
thisHeight = 3000;
}
return thisHeight;
}
который в основном пытается что угодно и все, чтобы получить нулевой результат. ClientHeight не влияет. С элементами проблемы я обычно получаю NaN в базе и ноль на высотах смещения и прокрутки. Затем я попытался добавить решение DOM и clientRects, чтобы увидеть, работает ли он здесь.
29 июня 2011, Я действительно обновил код, чтобы попробовать как добавить DOM, так и clientHeight с лучшими результатами, чем я ожидал.
1) clientHeight также был 0.
2) Dom фактически дал мне высоту, которая была большой.
3) ClientRects возвращает результат, почти идентичный методу DOM.
Поскольку добавленные элементы являются текучими по своей природе, когда они добавляются к иначе пустому элементу DOM Temp, они отображаются в соответствии с шириной этого контейнера. Это странно, потому что это на 30 пикселей меньше, чем в конечном итоге.
Я добавил несколько снимков, чтобы проиллюстрировать, как высота вычисляется по-разному.
Различия в высоте очевидны. Я мог бы добавить абсолютное позиционирование и скрытое, но я уверен, что это не повлияет. Я продолжал убеждаться, что это не сработает!
(далее я отвлекаюсь) Высота выходит (снизу) ниже, чем истинная высота. Это можно было бы решить, установив ширину элемента DOM Temp в соответствии с существующим родителем и может быть сделано довольно точно в теории. Я также не знаю, что приведет к их удалению и добавлению их обратно в их существующее местоположение. Когда они пришли через метод innerHTML, я буду искать этот подход.
* HOWEVER * Ничего из этого не было необходимо. На самом деле он работал как рекламируемый и вернул правильную высоту!!!
Когда мне удавалось снова увидеть меню, DOM вернула правильную высоту на макет жидкости вверху страницы (279px). В приведенном выше коде также используются getClientRects, которые возвращают 280px.
Это показано в следующем снимке (взятом из Chrome после работы). 
Теперь у меня есть noooooo идея, почему этот прототип трюка работает, но кажется. Кроме того, также работает getClientRects.
Я подозреваю, что причиной всех этих проблем с этими конкретными элементами было использование innerHTML вместо appendChild, но это чистая спекуляция на данный момент.
Хм, мы можем получить геометрию элемента...
var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);
Как насчет этого простого JS?
offsetHeight, обычно.
Если вам нужно что-то вычислить, но не показывать его, установите элемент visibility:hidden и position:absolute, добавьте его в дерево DOM, получите offsetHeight и удалите его. (То, что библиотека прототипов делает за кулисами в последний раз, когда я проверил).
Иногда offsetHeight возвращает ноль, потому что созданный вами элемент еще не был отображен в Dom. Я написал эту функцию для таких обстоятельств:
function getHeight(element)
{
var e = element.cloneNode(true);
e.style.visibility = "hidden";
document.body.appendChild(e);
var height = e.offsetHeight + 0;
document.body.removeChild(e);
e.style.visibility = "visible";
return height;
}
Если вы уже используете jQuery, лучшим вариантом будет .outerHeight() или .height(), как было указано.
Без jQuery вы можете проверить используемый размер окна и добавить различные paddings + border + clientHeight, или вы можете использовать getComputedStyle:
var h = getComputedStyle (document.getElementById('someDiv')). height;
h теперь будет строкой, подобной "53.825px".
И я не могу найти ссылку, но я думаю, что я слышал, что getComputedStyle() может быть дорогим, поэтому, вероятно, это не то, что вы хотите вызвать в каждом событии window.onscroll (но тогда и jQuery height()),.
С MooTools:
$( 'someDiv'). GETSIZE(). У
document.querySelector('.project_list_div').offsetHeight;
Если я правильно понял ваш вопрос, то, возможно, что-то подобное поможет:
function testDistance(node1, node2) {
/* get top position of node 1 */
let n1Pos = node1.offsetTop;
/* get height of node 1 */
let n1Height = node1.clientHeight;
/* get top position of node 2 */
let n2Pos = node2.offsetTop;
/* get height of node 2 */
let n2Height = node2.clientHeight;
/* add height of both nodes */
let heightTogether = n1Height + n2Height;
/* calculate distance from top of node 1 to bottom of node 2 */
let actualDistance = (n2Pos + n2Height) - n1Pos;
/* if the distance between top of node 1 and bottom of node 2
is bigger than their heights combined, than there is something between them */
if (actualDistance > heightTogether) {
/* do something here if they are not together */
console.log('they are not together');
} else {
/* do something here if they are together */
console.log('together');
}
}
Установили ли вы высоту в css? Если вам не нужно использовать offsetHeight;, а не height
var h = document.getElementById('someDiv').style.offsetHeight;