Предположим, что у меня есть <div>, который я хочу центрировать в окне браузера (viewport). Для этого мне нужно рассчитать ширину и высоту элемента <div>.
Что я должен использовать? Пожалуйста, укажите информацию о совместимости браузера.
Как получить фактическую ширину и высоту элемента HTML?
Ответ 1
Вы должны использовать свойства .offsetWidth и .offsetHeight.
Обратите внимание, что они принадлежат элементу, а не .style.
var width = document.getElementById('foo').offsetWidth;
Ответ 2
Взгляните на Element.getBoundingClientRect().
Этот метод вернет объект, содержащий width, height и некоторые другие полезные значения:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
Например:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
Я считаю, что это не имеет проблемы, которые .offsetWidth и .offsetHeight, где они иногда возвращают 0 (как обсуждалось в комментариях здесь)
Другое отличие состоит в том, что getBoundingClientRect() может возвращать дробные пиксели, где .offsetWidth и .offsetHeight будут округляться до ближайшего целого числа.
IE8 Примечание: getBoundingClientRect не возвращает высоту и ширину в IE8 и ниже. *
Если вы должны поддерживать IE8, используйте .offsetWidth и .offsetHeight:
var height = element.offsetHeight;
var width = element.offsetWidth;
Стоит отметить, что объект, возвращаемый этим методом, на самом деле не является нормальным объектом. Его свойства не перечисляются (например, Object.keys не работает "из коробки").
Подробнее об этом здесь: Как лучше всего преобразовать ClientRect/DomRect в простой объект
Ссылка:
-
.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight -
.offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth -
.getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Ответ 3
ПРИМЕЧАНИЕ: этот ответ был написан в 2008 году. В то время лучшим решением для большинства браузеров было использование jQuery. Я оставляю ответ здесь для потомков, и, если вы используете jQuery, это хороший способ сделать это. Если вы используете какую-либо другую фреймворк или чистый JavaScript, то приемлемый ответ, вероятно, является способом выхода.
В jQuery 1.2.6 вы можете использовать одну из основных функций CSS, height и width (или outerHeight и outerWidth, если это необходимо).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
Ответ 4
На всякий случай это полезно для всех, я помещаю текстовое поле, кнопку и div все с тем же css:
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
Я попробовал его в chrome, firefox и ie-edge, я пробовал с jquery и без, и я пробовал его с и без box-sizing:border-box. Всегда с <!DOCTYPE html>
Результаты:
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
Ответ 5
Согласно MDN: определение размеров элементов
offsetWidth и offsetHeight возвращают "общий объем пространства, занимаемого элементом, включая ширину видимого содержимого, полосы прокрутки (если есть), отступы и границы"
clientWidth и clientHeight возвращают "сколько места занимает фактическое отображаемое содержимое, включая отступы, но не включая границы, поля или полосы прокрутки"
scrollWidth и scrollHeight возвращают "фактический размер контента, независимо от того, какой его объем в данный момент виден"
Таким образом, это зависит от того, ожидается ли, что измеренное содержимое выйдет за пределы текущей видимой области.
Ответ 6
Вам нужно только вычислить его для IE7 и старше (и только если ваш контент не имеет фиксированного размера). Я предлагаю использовать условные комментарии HTML для ограничения взлома старых IE, которые не поддерживают CSS2. Для всех других браузеров используйте это:
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
Это идеальное решение. Он центрирует <div> любого размера и сжимает его до размера его содержимого.
Ответ 7
element.offsetWidth и element.offsetHeight должен делать, как было предложено в предыдущем посте.
Однако, если вы просто хотите сосредоточить контент, есть лучший способ сделать это. Предполагая, что вы используете xhtml strict DOCTYPE. установите margin: 0, свойство auto и требуемую ширину в px для тега body. Содержимое выравнивается по центру со страницей.
Ответ 8
... кажется CSS помогает поместить div в центр...
<style>
.monitor {
position:fixed;/* ... absolute possible if on :root */
top:0;bottom:0;right:0;left:0;
visibility:hidden;
}
.wrapper {
width:200px;/* this is size range */
height:100px;
position:absolute;
left:50%;top:50%;
visibility:hidden;
}
.content {
position:absolute;
width: 100%;height:100%;
left:-50%;top:-50%;
visibility:visible;
}
</style>
<div class="monitor">
<div class="wrapper">
<div class="content">
... so you hav div 200px*100px on center ...
</div>
</div>
</div>
Ответ 9
Стили элементов легко изменить, но немного сложно прочитать значение.
JavaScript не может прочитать любое свойство стиля элемента (elem.style), исходящее из css (внутреннее/внешнее), если вы не используете встроенный вызов метода getComputedStyle в javascript.
getComputedStyle (element [, pseudo])
Элемент: элемент, для которого нужно прочитать значение.
псевдо: псевдоэлемент, если требуется, например, :: before. Пустая строка или отсутствие аргумента означает сам элемент.
В результате получается объект со свойствами стиля, например, elem.style, но теперь по отношению ко всем классам CSS.
Например, здесь стиль не видит поля:
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// now we can read the margin and the color from it
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Поэтому изменил ваш код javaScript, включив в него getComputedStyle элемента, для которого вы хотите получить его width/height или другой атрибут
window.onload = function() {
var test = document.getElementById("test");
test.addEventListener("click", select);
function select(e) {
var elementID = e.target.id;
var element = document.getElementById(elementID);
let computedStyle = getComputedStyle(element);
var width = computedStyle.width;
console.log(element);
console.log(width);
}
}
Вычисленные и разрешенные значения
В CSS есть две концепции:
Вычисленное значение стиля - это значение после применения всех правил CSS и наследования CSS в результате каскада CSS. Это может выглядеть как высота: 1em или размер шрифта: 125%.
Разрешенное значение стиля - это то, которое окончательно применяется к элементу. Значения, такие как 1em или 125%, являются относительными. Браузер принимает вычисленное значение и делает все единицы фиксированными и абсолютными, например: height: 20px или font-size: 16px. Для геометрических свойств разрешенные значения могут иметь плавающую точку, например, ширину: 50,5 пикселей.
Давным-давно был создан метод getComputedStyle для получения вычисляемых значений, но оказалось, что разрешенные значения намного удобнее, и стандарт изменился.
Так что в настоящее время getComputedStyle фактически возвращает разрешенное значение свойства.
Пожалуйста, обратите внимание:
getComputedStyle требует полного имени свойства
Вы всегда должны запрашивать точное свойство, которое вы хотите, например paddingLeft или высоту или ширину. В противном случае правильный результат не гарантируется.
Например, если есть свойства paddingLeft/paddingTop, то что мы должны получить для getComputedStyle (elem).padding? Ничего, или, может быть, "сгенерированное" значение из известных отступов? Здесь нет стандартного правила.
Есть и другие несоответствия. Например, некоторые браузеры (Chrome) показывают 10px в документе ниже, а некоторые из них (Firefox) - нет:
<style>
body {
margin: 30px;
height: 900px;
}
</style>
<script>
let style = getComputedStyle(document.body);
alert(style.margin); // empty string in Firefox
</script>
для получения дополнительной информации https://javascript.info/styles-and-classes
Ответ 10
также вы можете использовать этот код:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
Ответ 11
Вот код для WKWebView, который определяет высоту определенного элемента Dom (не работает должным образом для всей страницы)
let html = "<body><span id=\"spanEl\" style=\"font-family: '\(taskFont.fontName)'; font-size: \(taskFont.pointSize - 4.0)pt; color: rgb(\(red), \(blue), \(green))\">\(textValue)</span></body>"
webView.navigationDelegate = self
webView.loadHTMLString(taskHTML, baseURL: nil)
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
webView.evaluateJavaScript("document.getElementById(\"spanEl\").getBoundingClientRect().height;") { [weak self] (response, error) in
if let nValue = response as? NSNumber {
}
}
}
Ответ 12
var box = document.querySelector('div');
//ширина и высота в пикселях, включая отступ и рамку
var width = box.offsetWidth; var height = box.offsetHeight;
//ширина и высота в пикселях, включая отступы, но без рамки
var width = box.clientWidth; var height = box.clientHeight;
Ответ 13
Если offsetWidth возвращает 0, вы можете получить свойство ширины стиля элемента и найти его для числа. "100px" → 100
/\ d */. Exec (MyElement.style.width)