Получение ширины и высоты элемента вне DOM в JS

function createCloudEntry(termName, fontSize) { 
    var div = document.createElement("div"); 
    div.innerText = termName; 
    div.style.fontSize = fontSize + "px"; 
    div.style.position = "absolute"; 
    div.style.display = "inline-block"; 
    div.style.top = getRandomPosition(0, cloudHeight - 40) + 'px'; 
    div.style.left = getRandomPosition(0, cloudWidth - 150) + 'px'; 

//document.write("Left: " + getRandomPosition(0, parseInt(cloudHeight)) + ", Top: " + getRandomPosition(0, parseInt(cloudWidth)) + "<br/>"); 
//document.write(div.style.width + " | " + div.style.height + "<br/>"); 

    return div;

}Получение ширины и высоты элемента вне DOM в JS

Так что это моя функция, где я просто создать новый DIV с некоторыми свойствами CSS. Мой вопрос: могу ли я получить ширину и высоту элемента SO FAR (после добавления текста с определенным размером шрифта), прежде чем он будет добавлен в DOM? Я попробовал window.getComputedStyle(), но это не сработало, div.style.width/height тоже не работает.

источник

2013-04-14 Rosen Dimov

Что вы имеете в виду? Элемент не имеет размера вне DOM, и точка, в которую вы вставляете его, может иметь последствия результирующего размера. Чего вы пытаетесь достичь? Почему бы вам просто не добавить элемент в DOM? –

Потому что мне нужно знать, сколько места оно занимает для функции getRandomPosition(), где я получаю случайные значения для свойств верхнего и левого шрифтов на основе его размера. –

Затем добавьте его в дом, сохраните размеры и снова удалите его из дома. Браузер не будет перерисовываться между ними, чтобы это не было видно пользователю. –

Я использую что-то вроде этого, чтобы временно добавить его в DOM, а затем удалить его сразу после того, как я вытащил значения.

function getElementSizing(e) 
{ 
    document.body.appendChild(e); 
    var s = {client:{w:e.clientWidth, h:e.clientHeight}, offset:{w:e.offsetWidth, h:e.offsetHeight}, scroll:{w:e.scrollWidth, h:e.scrollHeight}}; 
    document.body.removeChild(e); 
    return s; 
}

значение будет варьироваться в зависимости от типа элемента, это позиционирование (абсолютный, относительный) стиля и содержания, так что вы хотите, чтобы расширить его, чтобы удовлетворить ваши потребности.

var div = document.createElement("div"); 
div.innerText = 'some text'; 
div.style.fontSize = 12 + "px"; 
div.style.position = "absolute"; 
div.style.display = "inline-block"; 

var myDivSize = getElementSizing(div); 

console.log('DIV Client Width: '+myDivSize.client.w);//returns 46 in chrome. 
console.log('DIV Client Height: '+myDivSize.client.h);//returns 16 in chrome. 
console.log('DIV Offset Width: '+myDivSize.offset.w);//returns 46 in chrome. 
console.log('DIV Offset Height: '+myDivSize.offset.h);//returns 16 in chrome. 
console.log('DIV Scroll Width: '+myDivSize.scroll.w);//returns 46 in chrome. 
console.log('DIV Scroll Height: '+myDivSize.scroll.h);//returns 16 in chrome.

Надеюсь, что это поможет!

источник

2013-11-01 16:12:52

Получение ширины и высоты элемента вне DOM в JS

ответ

Смежные вопросы