Ширина Элемента DOM прежде Добавленный к DOM
Из http://en.cppreference.com/w/cpp/numeric/random/random_device :
Обратите внимание, что std :: random_device может быть реализовано в терминах движка псевдослучайных чисел, если для реализации не доступен недетерминированный источник (например, аппаратное устройство).
blockquote>Я ожидал бы достойной реализации, по крайней мере, RNG.
Редактирование: я подозреваю, что они сознательно выбрали выполнение одной и той же последовательности каждый раз, чтобы сделать очевидным тот факт, что поток не был таким случайным, как обещали.
5 ответов
Хитрость заключается в том, чтобы показать элемент (display: block), а также скрыть его (видимость: скрытый) и установить его абсолютное положение, чтобы он не влиял на поток страниц.
Класс MooTools Element.Measure делает это, как упоминал Оскар.
Немного изменил код. Вот чистое решение JS:
function measure(el, fn) {
var pV = el.style.visibility,
pP = el.style.position;
el.style.visibility = 'hidden';
el.style.position = 'absolute';
document.body.appendChild(el);
var result = fn(el);
el.parentNode.removeChild(el);
el.style.visibility = pV;
el.style.position = pP;
return result;
}
var div = document.createElement('div');
div.innerHTML = "<p>Hello</p><br/>";
alert(div.offsetHeight); // 0
alert(measure(div, function(el){return el.offsetHeight})); // 68/**
* Get bounding client rect for an element (not exists at current DOM tree)
* @param {!HTMLElement} el
* @return {!Promise<!ClientRect>}
*/
function getElementRect(el) {
return new Promise(resolve => {
const element = el.cloneNode(true);
element.style.visibility = "hidden";
element.style.position = "absolute";
document.body.appendChild(element);
resolve(element.getBoundingClientRect());
element.remove();
});
}
const div = /** @type {!HTMLElement} */ (document.createElement("div"));
div.innerHTML = "<p>Hello</p><br/>";
// Execute
(async () => {
const rect = await getElementRect(div);
console.log(rect.width);
})();
Что вы можете делать с помощью MooTools, так это использовать класс Element.Measure, то есть вы вводите элемент в DOM, но держите его скрытым. Теперь вы можете измерить элемент, не показывая его.
Это невозможно, по крайней мере, неточно, потому что стиль влияет на эти свойства, а место его размещения определяет, как он оформляется и какие правила влияют на него.
Например, размещение на странице по умолчанию будет шириной тела, если добавлено к нему как дочерний элемент, но если вы добавите его внутри, например, , тогда вы увидите, как это быстро меняет ситуацию.