Как получить фактическую ширину и высоту элемента HTML?
предположим, что у меня есть <div> что я хочу центрировать на дисплее браузера (viewport). Для этого мне нужно рассчитать ширину и высоту <div> элемент.
что я должен использовать? Просьба включить информацию о совместимости браузеров.
12 ответов
вы должны использовать .offsetWidth и .offsetHeight свойства.
Обратите внимание, что они принадлежат элементу, а не .style.
var width = document.getElementById('foo').offsetWidth;
посмотри 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;
стоит отметить, что объект, возвращаемый этим методом, на самом деле не является нормальный
Примечание: этот ответ был написан в 2008 году. В то время лучшим кросс-браузерным решением для большинства людей действительно было использование jQuery. Я оставляю ответ здесь для потомков, и если вы используете jQuery, это хороший способ сделать это. Если вы используете какую-то другую структуру или чистый JavaScript, принятый ответ, вероятно, является способом.
начиная с jQuery 1.2.6 вы можете использовать один из core функции CSS, height и width (или outerHeight и outerWidth, по мере необходимости).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
на всякий случай, если это кому-то полезно, я поставил текстовое поле, кнопку и 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
вам нужно только вычислить его для IE7 и старше (и только если ваш контент не имеет фиксированного размера). Я предлагаю использовать условные комментарии HTML для ограничения взлома старых IEs, которые не поддерживают 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> любого размера и сжимает-обертывает его до размера его содержимого.
по данным MDN: Определение размеров элементов
offsetWidth и offsetHeight возвращает "общий объем пространства, занимаемого элементом, включая ширину видимого содержимого, полосы прокрутки (если таковые имеются), заполнение и границу"
clientWidth и clientHeight return "сколько места занимает фактическое отображаемое содержимое, включая заполнение, но не включая границу, поля или полосы прокрутки"
scrollWidth и scrollHeight возврат " фактического размера содержания, независимо от того, сколько из него в настоящее время видно"
таким образом, это зависит от того, ожидается ли измеренное содержимое из текущей видимой области.
элемент.offsetWidth и элемент.offsetHeight должны сделать, как предложено в предыдущем посте.
однако, если вы просто хотите центрировать контент, есть лучший способ сделать это. Предполагая, что вы используете XHTML strict DOCTYPE. установите поле: 0, свойство auto и требуемую ширину в px для тега body. Содержимое выравнивается по центру страницы.
... кажется, 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>
легко изменить стили элементов, но довольно сложно прочитать значение.
JavaScript не может прочитать свойство стиля элемента (elem.стиль), исходящий из css (внутренний/внешний), если вы не используете встроенный вызов метода getComputedStyle в javascript.
getComputedStyle (element[, псевдо])
элемент: элемент для чтения значения.
псевдо: псевдо-элемент, если требуется, для пример:: раньше. Пустая строка или нет аргумента означает сам элемент.
результатом является объект со свойствами стиля, например elem.стиль, но теперь по отношению ко всем классам css.
например, здесь style не видит поля:
<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 элемента, который вы хотите получить, это ширина / высота или другой атрибут
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% относительны. Браузер принимает вычисленное value и делает все единицы фиксированными и абсолютными, например: высота:20 пикселей или размер шрифта: 16px. Для свойств геометрии разрешенные значения может иметь плавающую точку, например width: 50.5 px.
давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что разрешенные значения гораздо удобнее, и стандарт изменился.
Таким образом, в настоящее время getComputedStyle фактически возвращает разрешенное значение свойства.
Обратите Внимание:
getComputedStyle требуется полное имя свойства
вы всегда должны спрашивать точное свойство, которое вы хотите, например paddingLeft или высота или ширина. В противном случае правильный результат не гарантирован.
например, если есть свойства paddingLeft/ paddingTop, то что мы должны получить для getComputedStyle (elem).обивка? Ничего, или может быть," сгенерированное " значение из известных прокладок? Нет стандарта здесь править.
там другие нестыковки. Например, некоторые браузеры (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
также вы можете использовать этот код:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
здесь код 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 {
}
}
}
Если offsetWidth возвращает 0, вы можете получить свойство style width элемента и искать его для числа. "100 Пикс" -> 100
/ \d*/.exec (MyElement.стиль.ширина)